> Flutter Structure

> MaterialApp vs CupertinoApp

MaterialApp : Android 디자인
CupertinoApp : iOS 디자인

> Scaffold

가장 최 상단, 중간 영역, 최하단, 그리고 떠 있는 버튼을 지원해주는 클래스
a.k.a 구조가 있는 도화지

  
  const Scaffold(
    {Key? key,
    PreferredSizeWidget? appBar,
    Widget? body,
    Widget? floatingActionButton,
    FloatingActionButtonLocation? floatingActionButtonLocation,
    FloatingActionButtonAnimator? floatingActionButtonAnimator,
    List? persistentFooterButtons,
    Widget? drawer,
    DrawerCallback? onDrawerChanged,
    Widget? endDrawer,
    DrawerCallback? onEndDrawerChanged,
    Widget? bottomNavigationBar,
    Widget? bottomSheet,
    Color? backgroundColor,
    bool? resizeToAvoidBottomInset,
    bool primary,
    DragStartBehavior drawerDragStartBehavior,
    bool extendBody,
    bool extendBodyBehindAppBar,
    Color? drawerScrimColor,
    double? drawerEdgeDragWidth,
    bool drawerEnableOpenDragGesture,
    bool endDrawerEnableOpenDragGesture,
    String? restorationId}
  )

1) AppBar
- 해당 화면에 대한 메뉴나 이동 버튼, 그리고 제목 같은 것들을 가지고 있음
- Android에서 TitleBar, iOS에서는 NavigationBar로 불리는 영역

2) Body
- 가운데 영역을 담당

3) BottomNavigationBar
- 다른 창으로 이동할 수 있는 버튼들이 있는 영역
- Android에선 Bottom Navigation Bar라는 명칭을 그대로 쓰고 있고 iOS에선 Tab Bar로 불리던 영역

4) FloatingActionButton
- 창 위에 떠있는 효과를 주는 버튼
- Android에선 support library를 통해서 FloatingActionButton을 지원
- iOS 에선 직접 버튼을 배치해서 사용

예시코드

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  @override
  State createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: Center(child: Text('You have pressed the button $_count times.')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            label: "forward",
            icon: Icon(Icons.forward),
          ),
          BottomNavigationBarItem(
            label: "home",
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            label: "back",
            icon: Icon(Icons.backspace),
          ),
        ],
      ),
    );
  }
}

}

실행결과