[dart&flutter] void main , Scaffold

void main()

Dart를 실행시키면 가장 먼저 볼 수 있는 코드입니다. dart는 코드를 볼때 main 함수를 가장 먼저 실행시킵니다.

그렇기에 class를 main함수 밖에 만든 후, 이를 main에 넣어 줘야 실행이 됩니다.

Scaffold : 화면의 도화지!

그리고 일단 나머지는 생략하고 가장먼저 Scaffold 를 찾으세요.

어플리케이션 전체가 하나의 스케치북이라면

각각화면의 Scaffold가 있습니다. 화면마다 Scaffold가 도화지라고 생각하시면됩니다.

우리는 일단 Scaffold부터 배워봅시다.

Scaffold에서 우리는 무엇을을 넣을수있을까요?

Scaffold에 넣을수있는 Properties

• appBar → PreferredSizeWidget?

  An app bar to display at the top of the scaffold.final

• backgroundColor → Color?

  The color of the Material widget that underlies the entire Scaffold. […]final

• body → Widget?

  The primary content of the scaffold. […]final

• bottomNavigationBar → Widget?

  A bottom navigation bar to display at the bottom of the scaffold. […]final

• bottomSheet → Widget?

  The persistent bottom sheet to display. […]final

• drawer → Widget?

  A panel displayed to the side of the body, often hidden on mobile devices. Swipes in from either left-to-right (TextDirection.ltr) or right-to-left (TextDirection.rtl) […]final

• drawerDragStartBehavior → DragStartBehavior

  Determines the way that drag start behavior is handled. […]final

• drawerEdgeDragWidth → double?

  The width of the area within which a horizontal swipe will open the drawer. […]final

• drawerEnableOpenDragGesture → bool

  Determines if the Scaffold.drawer can be opened with a drag gesture. […]final

• drawerScrimColor → Color?

  The color to use for the scrim that obscures primary content while a drawer is open. […]final

• endDrawer → Widget?

  A panel displayed to the side of the body, often hidden on mobile devices. Swipes in from right-to-left (TextDirection.ltr) or left-to-right (TextDirection.rtl) […]final

• endDrawerEnableOpenDragGesture → bool

  Determines if the Scaffold.endDrawer can be opened with a drag gesture. […]final

• extendBody → bool

  If true, and bottomNavigationBar or persistentFooterButtons is specified, then the body extends to the bottom of the Scaffold, instead of only extending to the top of the bottomNavigationBar or the persistentFooterButtons. […]final

• extendBodyBehindAppBar → bool

  If true, and an appBar is specified, then the height of the body is extended to include the height of the app bar and the top of the body is aligned with the top of the app bar. […]final

• floatingActionButton → Widget?

  A button displayed floating above body, in the bottom right corner. […]final

• floatingActionButtonAnimator → FloatingActionButtonAnimator?

  Animator to move the floatingActionButton to a new floatingActionButtonLocation. […]final

• floatingActionButtonLocation → FloatingActionButtonLocation?

  Responsible for determining where the floatingActionButton should go. […]final

• hashCode → int

  The hash code for this object. […]@nonVirtual, read-only, inherited

• key → Key?

  Controls how one widget replaces another widget in the tree. […]final, inherited

• onDrawerChanged → DrawerCallback?

  Optional callback that is called when the Scaffold.drawer is opened or closed.final

• onEndDrawerChanged → DrawerCallback?

  Optional callback that is called when the Scaffold.endDrawer is opened or closed.final

• persistentFooterButtons → List<Widget>?

  A set of buttons that are displayed at the bottom of the scaffold. […]final

• primary → bool

  Whether this scaffold is being displayed at the top of the screen. […]final

• resizeToAvoidBottomInset → bool?

  If true the body and the scaffold’s floating widgets should size themselves to avoid the onscreen keyboard whose height is defined by the ambient MediaQuery’s MediaQueryData.viewInsets bottom property. […]final

• restorationId → String?

  Restoration ID to save and restore the state of the Scaffold. […]final

• runtimeType → Type

  A representation of the runtime type of the object.read-only, inherited

---

정말 많이 있다.

근데 다 외울 필요는 없고 flutter.io 공식문서를 필요할때마다 보면서 활용하면 된다.

그중 자주쓰는 몇가지는 알아두면 좋을것 같다.

Scaffold → backgroundColor → Color

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow,
    );//Scaffold
  }

Scaffold → body → Center (Widget)

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          "클로이의 어플리케이션에 오신걸 환영합니다.",
        ),//Text
      ), //Center
    );//Scaffold
  }

Scaffold → appBar →AppBar

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('클로이의 인생 영화'))//AppBar
      	);//Scaffold
      }