Jacob Ko

Jacob Ko

Everything is Awesome 👍

기본 위젯 1 (위치,정렬,크기,버튼,화면표시)

Updated:

1.화면 배치 기본 위젯

1-1.Container

  • 아무것도 없는 위젯이지만 다양한 프로퍼티를 가지고 있습니다.

  • 가로 세로 길이, 색, padding, margin 등의 설정이 가능하고 child property 로 다른 위젯을 가짓으로 가질수 있습니다.

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

image

1-2.Column

  • 수직 방향으로 위젯들을 나란히 배치 하는 위젯입니다. 레이아웃은 대부분 Column 과 Row 조합하여 만들기 때문에 매우 자주 사용됩니다.

  • children property 에는 여러 위젯의 리스트를 지정할 수 있습니다. 지정한 위젯들은 세로로 배치됩니다.

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

image

1-3.Row

  • Column 과 반대로 수평 방향으로 위젯들을 나란히 배치하는 위젯입니다

  • Column 과 같이 children property 에 여러 위젯을 나열합니다. Row, Column 과 같이 방향성이 있는 위젯은 mainAxis, crossAxis 관련 프로퍼티가 있습니다.

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(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.green,
      width: 100,
      height: 100,
      margin: const EdgeInsets.all(8.0),
      padding: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.blue,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
  ],
),

image

  • mainAxis 는 위젯의 기본방향을 나타냅니다 Row는 오른쪽 Column은 아래쪽이 mainAxis 가 됩니다. crossAxis 는 기본 방향의 반대 방향을 나태 냅니다

image

1-4.Stack

  • children에 나열한 여러 위젯을 순서대로 겹치게 합니다. 예를 들어 사진위에 글자를 표현하거나 화면 위에 로딩 표시를 할 때 사용됩니다

  • 순서는 children 프로퍼티에 정의한 위젯이 가장 아래쪽에 위치하고, 나중에 작성한 위젯이 위쫏에 위치하게 됩니다

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

image

1-5.SingleChildScrollView

  • Column 을 사용하여 위젯들을 나열하다가 화면 크기를 넘어서면 스크롤이 필요합니다. SingleChildScrollView 로 감싸면 하나의 자식을 포함하는 스크롤 가능한 위젯입니다

  • SingleChildScrollView 는 하나의 자식 위젯을 가져야 하기 때문에 Column 을 사용하여 상하 스크롤을 할 수 있지만, Column 은 기본적으로 표시되는 곳만 스크롤이 가능하기 때문에 Column 대신에 ListBody 를 사용하면 스크롤 가능 영역이 가로로 꽉 차기 때문에 유저가 스크롤하기 더 편해 집니다

Widget build(BuildContext context) {
    final items =
        List.generate(100, (i) => i).toList(); // 0 ~ 99 까지의 값을 갖는 리스트 생성

    return Scaffold(
      appBar: AppBar(
        title: Text('SindleChildScrollView'),
      ),
      body: SingleChildScrollView(
        child: ListBody(
          children: items.map((e) => Text('$e')).toList(),
        ),
      ),
    );
  }

Kapture 2021-10-09 at 16 48 32

1-6.ListView / ListTile

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

  • ListTitle 은 ListView의 children 프로퍼티에 다수의 위젯을 배치하면 정적인 리스트를 쉽게 만들 수 있습니다.

  • ListTitle 위젯은 leading, title, tailing 프로퍼티가 각각 왼쪽, 중앙, 오른쪽 위치에 아이콘이나 글자를 배치할 수 잇습니다. ListTitle의 onTap 은 탭(터치) 했을때 실행해야되는 이벤트를 실행하는 함수를 작성 할 수 있습니다. (JS 의 addEventLister() 와 같은 개념입니다)

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

image

1-7.GridView

  • 열의 수를 지정하여 그리드 형태로 표시하는 위젯입니다.

  • GridView.count() 생성자를 통해 그리드를 작성해주는데 crossAxisCount 프로퍼티에 열 수를 지정할 수 있습니다.

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

image

1-8.PageView

  • 여러 페이지를 좌우로 슬라이드하여 넘길 수 있도록 해주는 위젯입니다

  • children 프로퍼티에 각 화면을 표현할 위젯을 여러개 만들어서 지정하면 화면을 좌우로 슬라이드 할 수 있습니다

  • 주의점은 Tab과 연동하여 사용하지 않으면 좌우 슬라이드가 가능한지 사용자가 알지 못하기 때문에 Tab 과 연동해서 주로 사용합니다

body: PageView(
  children: <Widget>[
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
  ],
),

Kapture 2021-10-09 at 19 28 51

1-9.AppBar / TabBar / Tab / TabBarView

  • PageView 와 유사하지만 페이지와 탭이 연동되는 화면을 구성 할 수 잇습니다.

  • 생성 할때 먼저 DefaultTabController 를 Scaffold 에 전체적으로 wrap(감싸기) 해야합니다.

  • PageView와 비교했을때, tab 버튼이 있기 때문에 더 사용성이 좋습니다.

Widget build(BuildContext context) {
  return DefaultTabController(
    // Scaffold wrap
    length: 3, // 탭 수 지정
    child: Scaffold(
      appBar: AppBar(
        title: const Text('Tab'),
        bottom: TabBar(
          // Scffold 의 bottom 프로퍼티에 TabBar 지정
          tabs: <Widget>[
            // tabs 프로퍼티에 Tab의 리스트 지정
            Tab(icon: Icon(Icons.tag_faces)),
            Text('메뉴2'),
            Tab(icon: Icon(Icons.info), text: '메뉴3'),
          ],
        ),
      ),
      body: TabBarView(
        // Scaffold 의 body 프로퍼티에 TabBarView 배치
        children: <Widget>[
          // children 프로퍼티에 표시할 화면 배치
          Container(
            color: Colors.red,
          ),
          Container(
            color: Colors.green,
          ),
          Container(
            color: Colors.blue,
          ),
        ],
      ),
    ),
  );

Kapture 2021-10-09 at 19 50 45

1-10.BottomNavigationBar

  • 하단에 탭 메뉴를 구성할 수 있는 위젯입니다. 각 탭을 클릭하여 화면을 전활할 때 사용합니다.

  • Scaffold 프로퍼티중에서 bottomNavigationBar 프로퍼티를 정의하고 items 프로퍼티에 BottomNavigationBarItem 위젯으르 나열합니다. icon과 label 프로퍼티를 정의하여 간단히 하단 탭 바를 구성 할 수 있습니다.

  • 요즘 어플에는 대부분 사용되는 위젯입니다

return Scaffold(
  appBar: AppBar(
    title: Text('BottomNavigationBar'),
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: const [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Profile',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.notifications),
        label: 'Notification',
      ),
    ],
  ),
);

image

2.위치, 정렬, 크기 기본 위젯

화명을 구성할 때 배치한 위젯의 위치를 정해야 합니다. 위젯 중에는 위젯 크기나 위치, 정렬 등을 보조하는 위젯이 있습니다. 예를 들어 위젯을 중앙에 배치하거나, 한쪽 방향으로 정렬하거나, 위젯 사이에 여백을 주거나, 위젯을 특정 크기로 만들고 싶을때 사용하는 위젯들 입니다.

2-1.Center

  • 중앙으로 정렬시키는 위젯으로 상당히 자주 사용되는 위젯입니다.

  • child 프로퍼티에 중앙에 배치할 위젯을 설정합니다

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

image

2-2.Padding

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

  • 안쪽 여백은 padding 프로퍼티에 값을 지정합니다. 이 값은 EdgeInsets 클래스를 사용하여 설정하며 여러방법이 있습니다.

  • 앞에 const 를 붙이면 컴파일 타임에 상수로 정의되어 다시 사용되는 부분이 있어 메모리에 있는 값을 재사용하는 이득이 있습니다.

  • EdgeInsets 여러 함수를 제공합니다.

    • all()함수는 네 방향 모두 같은 값을 지정합니다 . EdgeInsets.all([double])

    • only() 함수는 상하좌우 중에서 원하는 방향에만 값을 지정합니다. 지정하지 않은 방향에는 기본값 0.0이 지정됩니다. EdgeInsets.only({left:[], top:[], right:[], bottom:[]})

    • fromLTRB() 함수는 네방향의 값을 각각 지정합니다. EdgeInsets.fromLTRB([왼쪽], [위], [오른쪽], [아래])

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

image

2-3.Align

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

  • Alignment 클래스에 정의되어 있는 정렬관련 상수들

상수 설명
bottomLeft 하단 왼쪽
bottomCenter 하단 중앙
bottomRight 하단 오른쪽
centerLeft 중단 왼쪽
center 중단 중앙
centerRight 중단 오른쪽
TopLeft 상단 왼쪽
topCenter 상단 중앙
topRight 상단 오른쪽 
body: Align(
  alignment: Alignment.bottomRight,
  child: Container(
    color: Colors.red,
    width: 100,
    height: 100,
  ),
),

image

2-4.Expanded

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

  • 여러 위젯에 동시에 적용하면 flex 프로퍼티에 정수값을 지정하여 비유을 정할 수 있으며 기본값은 1입니다.

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

image

2-5.SizedBox

  • 위젯 중에서 크기에 대한 프로퍼티가 업는 위젯이 많은데 그러한 위젯을 특정 크기로 만들려고 할때 주로 사용됩니다

  • width 에 가로 길이, height 에 세로 길이를 double 타입으로 지정합니다. SizeBox 를 child 없이 단독으로 사용하면 단순히 여벽을 표현하는데 사용할 수 있습니다.

  • Container 에 길이를 직접 지정하면 코드가 더 간결해 지지만 대부분 위젯은 크기 지정 프로퍼티르 ㄹ가지고 있지 않기 때문에 Container 보다 SizedBox 를 더 많이 사용합니다

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

image

2-6.Card

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

  • elevation 프로퍼티를 지정하여 그림자의 깊이를 조정할 수 있습니다. 좀 더 깊은 그림자를 표현하려면 좀 더 큰 값을 지정합니다.

  • shape 프로퍼티는 카드 모양을 변경하는 방법을 제공하며, 여기서는 RoundedRectangleBorder 클래스의 인스턴스를 지정했습니다, 이 클래스는 borderRadius 프로퍼티에 BorderRadius.circular() 메서드를 지정하여 카드 모서리의 둥근 정도의 실숫갑으로 조절합니다. 값이 클수록 더 둥글게 됩니다.

body: Center(
  child: Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16.0),
    ),
    elevation: 5.0,
    child: Container(
      width: 200,
      height: 200,
    ),
  ),
),

image

3.버튼 기본 위젯

플러터는 여러 종류의 버튼 위젯을 제공합니다

3-1.ElevatedButton

  • 입체감을 가지는 일반적인 버튼 위젯입니다

  • 버튼 위젯들은 모두 onPressed 프로퍼티에 버튼이 클릭되었을 때 실행될 함수를 반드시 정의해 줘야 버튼이 활성화되며 클릭가능합니다. 만약 null 을 지정하면 버튼이 클릭되지 않는 비활성화 상태가 됩니다.

body: Center(
  child: ElevatedButton(
    child: Text('RaisedButton'),
    onPressed: () {
      // 버튼을 누르면 실행될 코드 작성
    },
  ),
),

image

3-2.TextButton

  • 평평한 형태의 버튼입니다
body: Center(
  child: TextButton(
    child: Text('RaisedButton'),
    onPressed: () {
      // 버튼을 누르면 실행될 코드 작성
    },
  ),
),

image

3-3.IconButton

  • 아이콘을 표시하는 버튼 위젯입니다

  • 아이콘의 크기나 색을 지정할 수 있습니다. 이 위젯은 다른 위젯과 다르게 자식 위젯을 포함할수 없기 때문에 child 프로퍼티가 없습니다. 대신 아이콘을 icon 프로퍼티에 작성하고 크기는 iconSize 프로퍼티로 설정합니다.

body: Center(
  child: IconButton(
    icon: Icon(Icons.add),
    color: Colors.red, // 아이콘 색상
    iconSize: 100.0, // 기본값 24.0
    onPressed: () {
      // 버튼을 누르면 실행될 코드 작성
    },
  ),
),

image

3-4.FloatingActionButton

  • 입체감 있는 둥근 버튼 위젯입니다. 아이콘을 표시하는 데 사용합니다.

  • Scaffold 의 FloatingActionButton 프로퍼티에 바로 사용할 수 있고 일반적인 버튼 처럼 단독 사용할 수도 있습니다.

body: Center(
  child: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {
      // 버튼을 누르면 실행될 코드 작성
    },
  ),
),

image

4.화면 표시 기본 위젯

버튼과 더불어 화면 구성시 가장 자주 사용되는 위젯인 텍스트, 이미지, 아이콘, 프로그레스바 등이 있습니다.

4-1.Text

  • 기본적으로 글자를 표시하는 위젯으로 Text('글자) 형태로 나타내는데 style 프로퍼티에 TextStyle 클래스의 인스턴스를 지정하여 다양한 글자를 표현 할 수 잇습니다. TextStyle 클래스는 글자크기, 색상, 퐅트 스타일 등을 쉽게 설정할 수 있습니다.

  • Text 클래스의 첫 번째 인수는 필수 프로퍼티고 이름 없는 인수입니다. style 뿐만 아니라 모든 이름 있는 인수는 옵션 성격이므로 필요한 것을 선택적으로 사용할 수 있습니다.

body: const Center(
  child: Text(
    "Hello World",
    style: TextStyle(
      fontSize: 40.0, // 글자크기
      fontStyle: FontStyle.italic, // 이텔릭체
      fontWeight: FontWeight.bold, // 볼드체
      color: Colors.red, // 색상
      letterSpacing: 4.0, // 자간
    ),
  ),
),

image

4-2.Image

  • flutter 에서는 네트워크에 있는 이미지를 간단히 표시 할 수 있습니다. network() 메서드에 이미지 파일의 URL 을 입력하기만 하면 됩니다.

Image.network('http://bit.ly/2Pvz4t8')

image

  • asset() 메서드로 이미지 파일을 직접 표시할 수도 있습니다. root 경로에 assets 폴더를 만들어서 이미지 파일을 사용 할 수 있도록 pubspec.yaml 에서 flutter: 항목 아래의 assets 항목 아래에 폴더명을 지정하면 됩니다
// in pubspec.yaml
flutter:
  assets:
    - assets/

body: Image.asset('assets/sample.png'),

4-3.Icon

  • Material 디자인용 기본 아이콘들은 Icons 클래스에 상수로 미리 정의되어 있습니다. Icon 클래스의 인수로는 색상, 크기들을 설정 할 수 있습니다.
body: Center(
  child: Icon(
    Icons.home,
    color: Colors.red,
    size: 60.0,
  ),
),

image

4-4.Progress

  • 로딩 중이거나 오래 걸리는 작업을 할 때 사용자에게 진행 중임을 보여주는 용도로 사용하는 위젯입니다.

  • CircularProgressIndicator() LinearProgressIndicator() 가 있습니다.

body: const Center(
  child: CircularProgressIndicator(),
),
);

4-5.CircleAvatar

  • 프로필 화면 등에 많이 사용되는 원형 위젯입니다.

  • 네트워크 상에 존재하는 이미지를 표시한다면 child 프로퍼티가 아닌 backgroundImage 프로퍼티에 NetworkImage 클래스의 인스턴스를 지정해야 네트워크에서 받아온 이미지가 원형으로 표시 됩니다.

body: const Center(
  child: CircleAvatar(
    backgroundImage: NetworkImage('http://bit.ly/2Pvz4t8'),
  ),
),

image

🔶 🔷 📌 🔑

Reference

Categories:

Updated:

Leave a comment

You may also enjoy