[Flutter] 레이아웃 셋팅 및 위젯 배치

들어가기에 앞서…

강의에 나온 것처럼 설치를 진행했음에도 아래와 같은 문구가 나오면서 파일 및 폴더가 생성되지 않는 상황이 발생

Unable to find git in your PATH

그래서 해당 에러 문구를 구글링을 통해 찾아냄

아래의 질문에 대한 답변을 하나씩 실행하니까 원하는대로 설치 진행이 완료 되었음.

https://codingapple.com/forums/topic/flutter-설치시-flutter-doctor-쳤더니-계속-같은-에러가-뜹니다/

---

Flutter 기본 위젯 넣는 법

우선 main.dart에서 void main() 메서드 를 제외한 밑에 있는 코드를 모두 지우고

stless를 입력 후 엔터를 치면 나오는 코드로 변경해서 기본 셋팅 해주기!

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

이후 아래와 같이 작성하면서 코드를 작성해봄

// main.dart
import 'package:flutter/material.dart';

void main() {
  //runApp 안에 있는 MyApp을 실행해달라는 코드
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      //보통 Widget은 파스칼 케이스를 사용
      //그래서 글자를 넣고 싶다면 Text('글 내용')을 작성하면 된다.
      //그래서 이미지를 넣고 싶다면 Image.asset('경로')를 작성하면 된다. <-- 프로젝트 폴더 안에 위치해야 하고, pubspec.yaml에 등록을 해줘야 함.
      //그래서 아이콘를 넣고 싶다면 Icon(Icons.아이콘이름)을 작성하면 된다.
      //그래서 박스를 넣고 싶다면 Container(스타일 속성 추가하기) or SizedBox()를 작성하면 된다.
      // Flutter의 사이즈 단위는 LP라고 해서 현실에서 쓰는 cm, inch 단위랑 유사.
      // 1cm = 38LP
      // 50LP == 1.2cm

      // home: Text('안녕'),
      // home: Icon(Icons.shop),
      // home: Image.asset('JJangu.jpg'),
      
      //Center()는 내 하위 위젯의 기준점을 중앙으로 설정해주는 메서드
      home: Center(
        child: Container(width: 50, height: 50, color: Colors.blue),
      ),
    );
  }
}

여기서 이미지의 경우엔 위에서 작성한 것처럼 pubspec.yaml에 등록을 해줘야 하기에

아래처럼 pubspec.yaml에 작성해주기

// pubspec.yaml
...
# The following section is specific to Flutter packages.
flutter:
  assets:
    - assets/ // <-- 이미지를 넣은 디렉토리 명을 입력해주기
...

---

플러터 기본 앱 레이아웃 만드는 법 (Scaffold)

• MaterialApp()
  • 구글이 제공하는 아이콘을 제공하는 컴포넌트
  • 커스터마이징 하려고 할 때도 사용해야 함
    • 이유는 기본 셋팅이 있기에
    • 사용하지 않으면 코드가 엄청 길어짐.
• Cupertino()
  • 아이콘 사용할 때
• Scaffold()
  • 상중하로 나눠주는 Layout 위젯

import 'package:flutter/material.dart';

void main() {
  //runApp 안에 있는 MyApp을 실행해달라는 코드
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(), // 상단에 들어갈 위젯
        body: Container(), // 중간에 들어갈 위젯
        bottomNavigationBar: BottomAppBar(), // 하단에 들어갈 위젯
      ),
    );
  }
}

• Scaffold를 사용하면서 한 줄에 여러개의 위젯을 배치하고자 한다면
  • Container() 대신 Row( Children: [ ])으로 [] 안에 위젯들을 추가하기
• 세로로 여러개의 위젯을 배치하고자 한다면 Column( children: [ ])을 사용하면 된다.
  
  

import 'package:flutter/material.dart';

void main() {
  //runApp 안에 있는 MyApp을 실행해달라는 코드
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        body: Row(
          // 여러 위젯 가로로 배치하는 법
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star)
          ],
        ), // 중간에 들어갈 위젯
      ),
    );
  }
}

• 여기서 lint 적용으로 const 를 작성하라고 하는 문구와 함께 밑줄이 생기는데
  • 우선은 편하게 작성하기 위해 analysis_options.yaml에 들어가서 아래와 같이 작성하기

 linter:
  rules:
    prefer_const_constructors: false
    avoid_print: false
    prefer_typing_uninitialized_variables: false
    prefer_const_constructors_in_immutables: false
    # lint 적용하지 않겠다는 코드
    prefer_const_literals_to_create_immutables: false

• 이제 중앙 정렬을 하려고 할 때는 Center()을 사용할 수도 있지만
  • display: flex 와 유사한 기능으로 mainAxisAlignment 속성도 있다.
    • 해당 속성에는 다양한 것들이 있는데 center, spaceEvenly, spaceBetween 등 다양한 배치 방법이 있다.
  • 그리고 세로 축 정렬의 경우엔 crossAxisAlignment: CrossAxisAlignment.center를 사용할 수 있다.
    • 다만 세로의 경우엔 폭이 정해지지 않았기에 폭을 지정하면 적용된 모습을 확인 할 수 있다.
      
      

body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star)
          ],
        ),

• 숙제
  • 상단바, 중간, 하단바에 제시한 이미지대로 구현하기

import 'package:flutter/material.dart';

void main() {
  //runApp 안에 있는 MyApp을 실행해달라는 코드
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('앱임'),
        ),
        body: Container(
          child: Text('안녕'),
        ),
        bottomNavigationBar: BottomAppBar(
          height: 60,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Icon(Icons.phone, size: 30),
              Icon(Icons.message, size: 30),
              Icon(Icons.contact_page, size: 30),
            ],
          ),
        ),
      ),
    );
  }
}