MaterialApp()

구글이 제공하는 material 테마 사용 가능
구글 스타일의 다양한 ui, 위젯 사용 가능

• 아이폰(ios) 스타일 위젯 사용할 땐 Cupertino() 관련 사용하면 됨
• 커스터마이징 하고 싶을 때에도 MaterialApp() 사용

Scaffold

상중하로 나눠주는 위젯

return MaterialApp(
    home: Scaffold(
      appBar: AppBar(),
      body: Container(),
      bottomNavigationBar: BottomAppBar(),
    )
);

appBar: AppBar() → 상단에 들어갈 위젯

body: Container() → 중간에 들어갈 위젯

bottomNavigationBar: BottomAppBar() → 하단에 들어갈 위젯

return MaterialApp(
    home: Scaffold(
      body: Container(
        child: Icon(Icons.star)
      ),
    )
);

Scaffold() 를 사용하면 기본적으로 요소가 왼쪽 상단에 삽입된다.

여러 위젯 가로, 세로로 배치하는법

여러 위젯을 가로로 나란히 배치할 때에는 Row( children: [요소1, 요소2, 요소3, ...] ) 을 사용한다.

return MaterialApp(
    home: Scaffold(
      body: Row(
        children: [
          Icon(Icons.star),
          Icon(Icons.star),
          Icon(Icons.star),
        ]
      ),
    )
);

여러 위젯을 세로로 나란히 배치할 때에는 Column( children: [요소1, 요소2, 요소3, ...] ) 을 사용한다.

return MaterialApp(
    home: Scaffold(
      body: Column(
        children: [
          Icon(Icons.star),
          Icon(Icons.star),
          Icon(Icons.star),
        ]
      ),
    )
);

*Lint 비활성화시키는법

위 코드를 짜다보면 아래 사진처럼 보라색 박스가 쳐지거나 빨간 밑줄이 쳐질 수 있다.

이 때에는 analysis_options.yaml 파일로 가서 rules 아래에 다음 코드를 추가하고 저장해준다.

prefer_const_literals_to_create_immutables: false

여러 위젯 가로, 세로 정렬하기

mainAxisAlignment 를 사용하면 위젯을 여러 방식으로 정렬할 수 있다.

return MaterialApp(
    home: Scaffold(
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.star),
          Icon(Icons.star),
          Icon(Icons.star),
        ]
      ),
    )
);

위처럼 mainAxisAlignment: MainAxisAlignment. 라고 치면 여러가지 자동완성이 뜨는데 하나씩 해보면 된다.

mainAxisAlignment: MainAxisAlignment.center 라고 하면 중앙정렬이고

mainAxisAlignment: MainAxisAlignment.spaceEvenly 라고 하면 요소 사이에 적당한 간격을 띄워 가운데 배치해준다.

실습

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

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

<참조>
코딩애플 쉬운 플러터 2강 : 가로세로 배치하는 법과 Scaffold 강의