4. 기본 위젯 - 1

차례:

• 4.1 화면 배치에 쓰는 기본 위젯
  • Container
  • Column
  • Row
  • Stack
  • SingleChildScrollView
  • ListView, ListTile
  • GirdView
  • PageView
• 4.2 위치, 정렬, 크기를 위한 위젯
  • Center
  • Padding
  • Align
  • Expanded
  • SizeddBox
  • Card
• 4.3 버튼 계열 위젯
  • ElevatedButton
  • TextButton 
  • IconButton 
  • FloatingActionButton
• 4.4 화면 표시용 위젯
  • Text
  • Image
  • Progress

 

4.1 화면 배치에 쓰는 기본 위젯

4.1.1 Container

Container를 이용해 가로 세로 길이, 색, padding, margin등을 설정 가능하고 child property로 다른 위젯을 자식으로 가질 수 있다.

        body: Container(
          color: Colors.yellow,
          width: 100,
          height: 100,
          padding: EdgeInsets.all(8.0),
          margin: EdgeInsets.all(8.0),
        ),

4.1.2 Column

수직 방향으로 위젯들을 나란히 배치하는 위젯. Flutter에서 대부분 Column, Row를 조합하여 만든다.

body: Column(
        children: <Widget>[
          Container(
            color: Colors.red,
            width: 100,
            height: 100,
            padding: const EdgeInsets.all(6),
            margin:const EdgeInsets.all(6),
          ),
          Container(
            color: Colors.yellow,
            width: 100,
            height: 100,
            padding: EdgeInsets.all(6),
            margin: EdgeInsets.all(6),
          ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
            padding: EdgeInsets.all(6),
            margin: EdgeInsets.all(6),
          ),
        ],
      ),

4.1.3 Row

수평 방향으로 위젯들을 나란히 배치하는 위젯.

  body: Row(
        mainAxisSize: MainAxisSize.max, // 가로로 꽉 체우기
        mainAxisAlignment: MainAxisAlignment.center, // 가로 방향으로 가운데 정렬하기
        crossAxisAlignment: CrossAxisAlignment.center, // 세로 방향으로 가운데 정렬하기
        children: <Widget>[
          Container(
            color: Colors.red,
            width: 100,
            height: 100,
            padding: const EdgeInsets.all(6),
            margin:const EdgeInsets.all(6),
          ),
          Container(
            color: Colors.yellow,
            width: 100,
            height: 100,
            padding: EdgeInsets.all(6),
            margin: EdgeInsets.all(6),
          ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
            padding: EdgeInsets.all(6),
            margin: EdgeInsets.all(6),
          ),
        ],
      ),

• mainAxis는 위젯의 기본 방향을 나타냅니다. Row는 오른쪽, Column은 아래쪽.
• crossAxis는 Row - 아래쪽, Column - 오른쪽

MainAxisSize의 정의된 상수

상수	설명
max	최대크기, 남은 공간을 모두 차지한다
min	최소 크기, 포함된 콘텐츠의 크기만큼만 차지한다.

 

4.1.4 Stack

Stack 위젯은 children에 나열한 위젯을 순서대로 겹치게 합니다. 예를 들면 사진 위에 글자를 표현하거나 화면 위에 로딩 표시를 하는 상황에 사용할 수 있습니다.

        body: Stack(
          children: <Widget>[
            Container(
              color: Colors.red,
              width: 100,
              height: 100,
              padding: EdgeInsets.all(8.0),
              margin: EdgeInsets.all(8.0),
            ),
            Container(
              color: Colors.green,
              width: 80,
              height: 80,
              padding: EdgeInsets.all(8.0),
              margin: EdgeInsets.all(8.0),
            ),
            Container(
              color: Colors.blue,
              width: 60,
              height: 60,
              padding: EdgeInsets.all(8.0),
              margin: EdgeInsets.all(8.0),
            ),
          ],
        ),

4.1.5 SingleChildScrollView

• Column을 사용하여 위젯들을 나열하다가 화면 크기를 넘어서면 스크롤이 필요합니다. 그럴때는 SingleChildScrollView로 감싸서 스크롤이 가능하게 할 수 있습니다.
• SingleChildView 는 하나의 자식을 위젯으로 가져야 한다. 예제에서는 ListBody를 사용. 

        body: SingleChildScrollView(
          child: ListBody(
            children: items.map((i) => Text('$i')).toList(),
          ),
        ),

4.1.6 ListView, ListTile

• ListView는 리스트를 표시하는 위젯입니다.
• SingleChildScrollView와 ListBody이 조합과 동일한 효과를 내지만 좀 더 리스트 표현에 최적화된 위젯이다.

        body: ListView(
          scrollDirection: Axis.vertical,
          children: [
            ListTile(
              leading: Icon(Icons.home),
              title: Text('Home'),
              trailing: Icon(Icons.navigate_next),
              onTap: () {},
            ),
            ListTile(
              leading: Icon(Icons.event),
              title: Text('Event'),
              trailing: Icon(Icons.navigate_next),
              onTap: () {},
            ),
            ListTile(
              leading: Icon(Icons.camera),
              title: Text('Camera'),
              trailing: Icon(Icons.navigate_next),
              onTap: () {},
            ),
          ],
        ),

• ListTile의 leading, title, trailing 프로퍼티는 각각 왼쪽, 중앙, 오른쪽 위치를 담당해 자유롭게 아이콘이나 글자를 배치할수 있다. 
• onTap 프로퍼티에는 리스트의 항목을 터치 했을때 동작 정의.

4.1.7 GridView

열 수를 지정항 grid 형태로 표시하는 위젯.

        body: GridView.count(
          crossAxisCount: 2,
          children: [
            Container(
              color: Colors.red,
              width: 100,
              height: 100,
              padding: EdgeInsets.all(8.0),
              margin: EdgeInsets.all(8.0),
            ),
            Container(
              color: Colors.green,
              width: 100,
              height: 100,
              padding: EdgeInsets.all(8.0),
              margin: EdgeInsets.all(8.0),
            ),
            Container(
              color: Colors.blue,
              width: 100,
              height: 100,
              padding: EdgeInsets.all(8.0),
              margin: EdgeInsets.all(8.0),
            ),
          ],
        ),

4.2 위치, 정렬, 크기를 위한 위젯

화면을 구정할 때는 위젯의 위치를 정해야 함. 위젯의 크기나 위치, 정렬등을 보조하는 위젯이 있다.

위젯을 중앙에 배치하거나, 한쪽 방향으로 정렬하거나, 위젯 사이에 여백을 주거나, 위젯을 특정 크기로 만들고 싶을때 사용하는 위젯을.

4.2.1 Center

중앙으로 정렬시키는 위젯. 

        body: Center(
          child: Container(
            color: Colors.red,
            width: 100,
            height: 100,
          ),
        ),

4.2.2 Padding

안쪽 여백을 표현할때 사용하는 위젯.

        body: Padding(
          padding: EdgeInsets.all(40.0),
          child: Container(
            color: Colors.red,
          ),

4.2.3 Align

자식 위젯의 정렬 방향을 정할 수 있는 위젯. 원하는 방향으로 정렬할 때 사용.

        body: Align(
          alignment: Alignment.bottomRight,
          child: Container(
            color: Colors.red,
            width: 100,
            height: 100,
          ),

4.2.4 Expanded

자식 위젯의 크기를 최대한으로 확장시켜주는 위젯.

        body: Column(
          children: [
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.green,
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.blue,
              ),
            ),
          ],
        ),

여러 위젯을 동시에 적용하면 flex 프로퍼티를 이용해서 비율을 정할수 있다. 기본 값은 '1' 이다.

4.2.5 SizedBox

위젯 중에는 크기에 관련뎃 프로퍼티가 없는 위젯이 많은데 그러한 위젯을 특정 크기로 만들고 싶을 때 사용함. 

        body: SizedBox(
          width: 100,
          height: 100,
          child: Container(
            color: Colors.red,
          ),
        ),

4.2.6 Card

카드 형태의 모양을 제공하는 위젯. 기본적으로 크기는 0이고, 자식 위젯의 크기에 따라 크기가 결정된다.

        body: Center(
          child: Row(
            children: [
              Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(16.0),
                ),
                elevation: 4.0,
                child: Container(
                  width: 200,
                  height: 200,
                ),
              ),
              Card(
                shape: CircleBorder(),
                elevation: 4.0,
                child: Container(
                  width: 200,
                  height: 200,
                ),
              ),
            ],
          ),
        ),

4.3 버튼 계열 위젯

플러터는 여러 종류의 버튼 위젯이 있다. 

Old Widget	Old Theme	New Widget	New Theme
FlatButton	ButtonTheme	TextButton	TextButtonTheme
RaisedButton	ButtonTheme	ElevatedButton	ElevatedButtonTheme
OutlineButton	ButtonTheme	OutlinedButton	OutlinedButtonTheme

4.3.1 ElevatedButton

입체감 있는 버튼

        body: ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.red, // background
            foregroundColor: Colors.white, // foreground
          ),
          onPressed: () {},
          child: Text('ElevatedButton with custom foreground/background'),
        ),

4.3.2  TextButton

평평한 버튼

        body: TextButton(
          style: TextButton.styleFrom(
            foregroundColor: Colors.red, // foreground
            backgroundColor: Colors.white,
          ),
          onPressed: () {},
          child: Text('TextButton with custom foreground'),
        ),

4.3.3 IconButton

아이콘을 표시하는 버튼 위젯

        body: IconButton(
          icon: Icon(Icons.add),
          color: Colors.red,
          iconSize: 100.0,
          onPressed: () {},
        ),

4.3.4 FloatingActionButton

입체감 있는 둥근 버튼. 아이콘을 표시하는 데 사용.

        body: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {},
        ),

4.4 화면 표시용 위젯

4.4.1 Text

글자 표시하는 위젯

        body: const Text(
          'Hello World',
          style: TextStyle(
            fontSize: 40.0,
            fontStyle: FontStyle.italic,
            fontWeight: FontWeight.bold,
            color: Colors.red,
            letterSpacing: 4.0,
          ),
        ),

4.4.2 Image

네트워크에서 이미지 가져오는 방법이 훨씬 쉬워짐.

        body: Column(
          children: [
            Text('Images : '),
            Image.network('https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png'),
            Image.asset('images/coke.png') 
          ],
        ),

로컬 이미지를 불러올떄는 asset과 함께 pubspec.yaml에도 해당 내용을 추가해야 합니다. 

# To add assets to your application, add an assets section, like this:

assets:

- images/coke.png

# - images/a_dot_ham.jpeg  

4.4.3 Progress 

로딩중이나 오래 걸리는 작업을 할 때, 유저에게 진행 중임을 보여주는 위젯.

        body: Column(
          children: [
            CircularProgressIndicator(),
            LinearProgressIndicator(),
          ],
        ),