Flutter - Layout 만들기(2) (GridView, ListView, Stack, Card) [5]

1. GridView

GridView.extent

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('MainPage'),
          actions: [
            Icon(Icons.search),
          ],
        ),
        body: GridView.extent(
          maxCrossAxisExtent: 50,
          padding: const EdgeInsets.all(4),
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          children: _buildGridTileList(30),
        )
    );
  }

  List<Container> _buildGridTileList(int count) =>
      List.generate(count, (index) => Container(
        child: FlutterLogo(),
        decoration: BoxDecoration(
          color: Colors.black
        ),
      ));
}

MainPage

​ GridView.extent: maxCrossAxisExtent를 최대 사이즈로 레이아웃을 채운다.

​ maxCrossAxisExtent: item 하나의 최대 크기를 지정한다.

​ mainAxisSpacing: 세로item간의 간격을 지정한다.

​ crossAxisSpacing: 가로item간의 간격을 지정한다.

​ children: GridView에 들어갈 Widget을 지정한다.

​ - _buildGridTileList: 추가할 item을 List형태로 반환한다.

 

 

 

 

GridView.count

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('MainPage'),
          actions: [
            Icon(Icons.search),
          ],
        ),
        body: GridView.count(
          crossAxisCount: 6,
          padding: const EdgeInsets.all(4),
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          children: _buildGridTileList(30),
        ));
  }

  List _buildGridTileList(int count) => List.generate(
      count,
      (index) => Container(
            child: FlutterLogo(),
            decoration: BoxDecoration(color: Colors.black),
          ));
}

MainPage

​ GridView.count: maxCrossAxisExtent를 최대 사이즈로 레이아웃을 채운다.

​ crossAxisCount: 열에 최대 item갯수를 지정한다.

​ mainAxisSpacing: 세로item간의 간격을 지정한다.

​ crossAxisSpacing: 가로item간의 간격을 지정한다.

​ children: GridView에 들어갈 Widget을 지정한다.

​ - _buildGridTileList: 추가할 item을 List형태로 반환한다.

 

 

 

 

2. ListView

ListView

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('MainPage'),
          actions: [
            Icon(Icons.search),
          ],
        ),
        body: ListView(
          children: [
            _tile('title1', 'subtitle1', Icons.account_circle),
            _tile('title2', 'subtitle2', Icons.account_circle),
          ],
        ));
  }

  ListTile _tile(String title, String subTitle, IconData icon) => ListTile(
        title: Text(
          title,
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 20,
          ),
        ),
        subtitle: Text(subTitle),
        leading: Icon(
          icon,
          color: Colors.blue[500],
        ),
      );
}

MainPage

​ ListView: 리스트형태의 레이아웃을 생성한다.

​ children: ListTile의 배열로 구성된다.

​ _title: title, subTitle, Icon을 사용하여 ListTile을 만든다.

​ - title: title위치의 Widget을 지정한다.

​ - subtitle: subtitle위치의 Widget을 지정한다.

​ - leading: title옆에들어갈 Widget을 지정한다.

 

 

 

 

3. Stack

Stack

ListTile _tile(String title, String subTitle, IconData icon) =>
      ListTile(
        title: Text(
          title,
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 20,
          ),
        ),
        subtitle: Text(subTitle),
        leading: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            Icon(
              icon,
              color: Colors.blue[500],
              size: 50,
            ),
            Text(
              title,
              style: TextStyle(fontSize: 12),
            )
          ],
        ),
      );

MainPage

​ : leading의 아이콘위에 Text를 추가

​ Stack: 위로 Widget을 쌓을수 있는 레이아웃을 생성한다.

​ alignment: 가운데 아래로 정렬을 한다.

​ children: Stack에 들어갈 Widget을 뒤에 부터 순서대로 넣는다.

 

 

 

 

4. Card

Card

body: ListView(
          children: [
            Card(
              child: _tile('title1', 'subtitle1', Icons.account_circle),
            ),
            Card(
              child: _tile('title2', 'subtitle2', Icons.account_circle),
            ),
          ],
        ));

MainPage

​ : ListTile을 Card로 감싼다.

​ Card: _tile을 사용하여 감싸면 CardView안에 내용이 들어가게된다.