devlog

Container

html의 div 역할

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber, // 배경색 변경
    );
  }
}

MaterialApp

Container의 한종류로서 안드로이드 친화적인 디자인으로 개발한다는 것을 알려줌 이와 대비로 ios 친화적인 cupertinoapp이 있음

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

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

Scaffold

기본 뼈대를 가지고 있음 - Appbar, bottomNavigationBar ...

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // Android app 만들꺼에요
      home: Scaffold( // 기본 구조를 들고 있어요
        body: Text("hello"),
      ),
    );
  }
}

위의 경우 안드로이드 상단 바 영역을 제대로 표현 못하기에 안전한 영역에만 그리도록 해줄 필요가 있음 -> SafeArea

Scaffold 끝에 커서를 두고 alt(option) + enter → wrap with widget 을 사용하면 쉽게 바꿀 수 있음

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // Android app 만들꺼에요
      home: SafeArea(
        child: Scaffold( // 기본 구조를 들고 있어요
          body: Text("hello"),
        ),
      ),
    );
  }
}

AppBar

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // Android app 만들꺼에요
      home: SafeArea(
        child: Scaffold( // 기본 구조를 들고 있어요
          appBar: AppBar( //appbar를 그려줌
            backgroundColor: Colors.blue,
          ),
          body: Text("hello"),
        ),
      ),
    );
  }
}

appBar: AppBar(
  backgroundColor: Colors.blue,
  title: Text("First app"),
  leading: Icon(Icons.menu), //appbar의 햄버거 버튼추가
),

FloatingActionButton

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // Android app 만들꺼에요
      home: SafeArea(
        child: Scaffold( // 기본 구조를 들고 있어요
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: Text("First app"),
          ),
          body: Text("hello"),
          floatingActionButton: FloatingActionButton( //하단 floating 버튼
            onPressed: () {  },
            child: Text("button"),
          ),
        ),
      ),
    );
  }
}

BottomNavigationBar

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // Android app 만들꺼에요
      home: SafeArea(
        child: Scaffold( // 기본 구조를 들고 있어요
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: Text("First app"),
          ),
          body: Text("hello"),
          floatingActionButton: FloatingActionButton(
            onPressed: () {  },
            child: Text("button"),
          ),
          bottomNavigationBar: BottomNavigationBar( // 하단 네비게이션바
            backgroundColor: Colors.yellow, 
            items: [ // 네비게이션 바에 들어갈 항목
              BottomNavigationBarItem(
                  label:"hello",
                  icon: Icon(
                    Icons.access_alarm_rounded,
                  )),
              BottomNavigationBarItem(
                  label:"hello",
                  icon: Icon(
                    Icons.access_alarm_rounded,
                  )),
            ],
          ),
        ),
      ),
    );
  }
}