자주 사용하는 위젯

Container 위젯

Container 위젯은 레이아웃을 구성하는 데 사용되는 가장 기본적인 위젯으로 화면에 박스를 랜더링 하기 위해 사용됩니다.

Container(
  // 크기를 지정하지 않으면 자식요소의 크기에 맞춰지고, 자식위젯이 없으면 최대값으로 고정
  width: 100, //가로
  height: 100, //세로

  color: Colors.blue //배경색
  child Center:(
  	//자식요소
  )
);

 

Text 위젯

Text 위젯은 화면에 텍스트를 표시하는위젯으로 스타일 옵션을 사용할 수 있습니다.

Text(
  'Hello World',
  style: TextStyle(fontSize: 20, color: Colors.red),
);

 

Row와 Column

 

자식요소들을 Row 는 가로 방향으로, Column은 세로 방향으로 정렬합니다.

Row(
  children: <Widget>[
    Container(
    
    ),
  ],
);

Column(
  children: <Widget>[
    Container(
    
    ),
  ],
);

 

ListView 위젯

ListView 위젯은 스크롤 가능한 리스트를 만듭니다.

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.list),
      title: Text('list1'),
    ),
    ListTile(
      leading: Icon(Icons.list),
      title: Text('list2'),
    ),
  ],
);

 

ElevatedButton 위젯

ElevatedButton 위젯은 사용자 인터페이스(안드로이드,ios)에서 사용하는 기본적인 디자인의 버튼을 제공합니다.

ElevatedButton(
  onPressed: () {
    //버튼 클릭시 실행할 함수
  },
  child: Text('클릭'),
);

 

Scaffold 위젯

Scaffold 위젯은 앱의 기본적인 구조와 레이아웃을 제공하는 위젯으로, 구글 느낌이 나는 구글식 디자인 구조를 제공합니다.

Scaffold(
  // 상단바
  appBar: AppBar(
    title: Text('My App'),
  ),
  
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          child: Text('메뉴'),
            decoration: BoxDecoration(
            color: Colors.blue,
          ),
        ),
        ListTile(
          title: Text('마이페이지'),
          onTap: () {
            // 클릭시 실행할 함수
            Navigator.pop(context); // 드로어 닫기
          },
        ),
      ],
    ),
  ),
  
  body: Center(
    child: Text('Hello, Flutter!'),
  ),
  
  // 하단 네비게이션 바
  bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.menu),
        label: '메뉴',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.settings),
        label: '설정',
      ),
    ],
    currentIndex: 0,
    selectedItemColor: Colors.amber[800],
    onTap: (index) {
    // 클릭시 실행할 함수
    },
  ),
);