[TIL] 2022-04-21 Flutter-#4

오늘은 이런 것들을 공부해볼까요.

• MaterialApp()
• Scaffold()
• 커스텀 위젯 (추가예정)

어딘가 익숙한 녀석들 입니다. 그렇죠?

1. MaterialApp()

• MaterialApp() 으로 나의 앱을 싸매야 플러터 팀에서 만들어둔 위젯들을 빠르게 사용할 수 있습니다.

  • 플러터에서 제공하는 기본 테마이며 Material과 Cupertino를 제공하고 있습니다.
  • Cupertino() 는 흔히 아이폰 앱을 생각하시면 될 것 같습니다.

[주의]

• Material Design 사용하기 위해서 pubspec.yaml 파일을 다음과 같이 변경합시다.

flutter:
  uses-material-design: true

2. Scaffold()

이전글에 머리 몸통 하단바 언급했던 내용 기억하시죠? 이전글

• Scaffold() 는 앱 화면을 상단 - 몸통 - 하단으로 나누어주는 역할을 합니다.

  • 우리가 자주 접하는 대부분의 앱은 상단-중간-하단 으로 구분되어 있어요.

  • Scaffold()가 없다면 appBar(), body(), bottomNavigationBar() 이런 친구들을 사용할 수 없어요.

    why? = 왜냐구요? Scaffold() 위젯안에 들어있는 친구들이거든요.

    

3. 커스텀 위젯

플러터로 코드를 작성하다보면 유난히 body: 안에 들어가는 내용이 길고 복잡해지기 마련입니다.
이럴땐 커스텀 위젯을 만들어서 코드를 정리하면 관리하기도 편하고 가독성도 좋지 않을까요?

- 커스텀 위젯 만드는 방법

• 전체 코드를 빠져나와서 빈 공간에 stl 이라고 적어볼까요? 그럼 자동완성 하라고 추천해줍니다.

• statelessWidget 이 만들어집니다.

• 이제 커스텀 위젯의 이름을 만들어야 하는데요. (첫 글자는 대문자로 만들어볼까요)

• 저는 이렇게 작성했습니다.

class MyBottomWidget extends StatelessWidget {
  const MyBottomWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Icon(Icons.star),
          Icon(Icons.link),
          Icon(Icons.star),
        ],
      ),
    );

• 코드설명

  • 앞서 이야기한 커스텀 위젯의 이름을 'class' 로 정의합니다.

  • 커스텀 위젯에서 MaterialApp 혹은 Scaffold 를 return 하지 않고 본인이 축약할 위젯을 바로 적어볼까요.

  • 그럼 이제 MyBottomWidget() 을 쓸때마다 방금 만들어놓은 위젯들을 불러옵니다.

• 한번 실제로 적용해볼까요?

• 기존에 만들어둔 MyApp 클래스에서 저희는 하단바를 만들었으니 하단바를 불러와볼까요.

// MyApp 내부 
// (생략)
bottomNavigationBar: MyBottomWidget(),

잘 불러와지네요.

커스텀 위젯에서 아이콘들을 변경하면 MyApp 내부에서 잘 받아주겠죠?

[ 커스텀 위젯 ]

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Icon(Icons.home),
          Icon(Icons.linked_camera),
          Icon(Icons.link),
        ],
      ),
    );
  }

오늘 배운 3가지는 정말 기본적이고
항상 사용하기 때문에 잘 기억했으면 좋겠습니다.