Flutter Column, Row _ Expanded, Stack

전체코드

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Sample createState() => Sample();
}

class Sample extends State<MyHomePage>{
  @override
  Widget build(BuildContext context){
    double appBarHeight = 50.0;
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(appBarHeight),
          child:AppBar(
            title: Text('ExpandedStack Demo'),
            backgroundColor: Colors.cyan,
          ),
        ),
        body: Container(
          child: Column(
            children: <Widget>[
              Expanded(flex: 2,
                child: Row(children: <Widget>[
                  Expanded(flex: 1, child: Red()),
                  Expanded(flex: 2, child: Green()),
                  Expanded(flex: 3, child: Blue()),
                ]),
              ),
              Expanded(flex: 1,
                child: Row(children: <Widget>[
                  Expanded(flex: 3, child: Green()),
                  Expanded(flex: 2, child: Blue()),
                  Expanded(flex: 1, child: Red()),
                ]),
              ),
              Expanded(flex: 2,
                child: Row(children: <Widget>[
                  Expanded(flex: 1, child: Blue()),
                  Expanded(flex: 2,
                    child: Stack(
                      children: <Widget>[
                        Red(),
                        Center(child: Container(child: Card(color: Colors.yellow), width: 100, height: 100,))]
                    )
                  ),
                  Expanded(flex: 1, child: Green()),
                ]),
              ),
            ]
          ),
        ),
      ),
    );
  }
}

// Card 위젯 구현
class Red extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return new LayoutBuilder(builder: (context, constraint) {
      double min = (constraint.biggest.width < constraint.biggest.height)
          ? constraint.biggest.width : constraint.biggest.height;
      return Container(
        width: constraint.biggest.width,
        height: constraint.biggest.height,
        child: Card(color: Colors.red)
      );
    });
  }
}

// Text 위젯 구현
class Green extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return new LayoutBuilder(builder: (context, constraint) {
      double min = (constraint.biggest.width < constraint.biggest.height)
          ? constraint.biggest.width : constraint.biggest.height;
      return Container(
        width: constraint.biggest.width,
        height: constraint.biggest.height,
        color: Colors.green,
        child: Center(
          child: Text('GREEN',
            style: TextStyle(fontSize: min / 4, color: Colors.white, decoration: TextDecoration.none, fontWeight: FontWeight.normal)
          )
        )
      );
    });
  }
}

// Icon 위젯 구현
class Blue extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return new LayoutBuilder(builder: (context, constraint) {
      double min = (constraint.biggest.width < constraint.biggest.height)
          ? constraint.biggest.width : constraint.biggest.height;
      return Container(
        width: constraint.biggest.width,
        height: constraint.biggest.height,
        color: Colors.blue,
        child: Icon(Icons.access_alarms, size: min / 2, color: Colors.white),
      );
    });
  }
}

Red, Green, Blue 에 대한 설명은 https://cdl-dev.tistory.com/10 참조

Flutter 기본 Widget 구현

 

Sample

class Sample extends State<MyHomePage>{
  ...
        body: Container(
          child: Column(
            children: <Widget>[
              Expanded(flex: 2,
                child: Row(children: <Widget>[
                  Expanded(flex: 1, child: Red()),
                  Expanded(flex: 2, child: Green()),
                  Expanded(flex: 3, child: Blue()),
                ]),
              ),
              Expanded(flex: 1,
                child: Row(children: <Widget>[
                  Expanded(flex: 3, child: Green()),
                  Expanded(flex: 2, child: Blue()),
                  Expanded(flex: 1, child: Red()),
                ]),
              ),
              Expanded(flex: 2,
                child: Row(children: <Widget>[
                  Expanded(flex: 1, child: Blue()),
                  Expanded(flex: 2,
                    child: Stack(
                      children: <Widget>[
                        Red(),
                        Center(child: Container(child: Card(color: Colors.yellow), width: 100, height: 100,))]
                    )
                  ),
                  Expanded(flex: 1, child: Green()),
                ]),
              ),
            ]
          ),
        ),
  ...
}

- Expanded

 Expanded 는 보통 Column, Row Widget 과 많이 쓰인다. Column 과 Row Widget 은 children 에 할당되는 Widget 들의 크기에 따라 자동으로 공간을 할당한다.(크기가 지정되지 않은경우 동일한 크기로 자동 할당) 이때 각 Widget의 부모에 Expanded Widget을 사용하고 "flex:" 에 값을 할당하면 할당된 flex 에 따라 비율을 조정한다. 위에서는 Column을 (2 : 1 : 2) 의 크기비율로 나누고 각 Row를 (1 : 2 : 3), (3 : 2 : 1), (1 : 2 : 2) 의 크기비율로 나누었다.

- Stack

 Stack은 children 에 할당되는 Widget 들을 순서에 따라 덮어쓰고 출력한다. 위에서는 Red()를 먼저 출력하고 Center에 (100,100) Size를 갖는 노란색의 Card를 덮어쓰고 출력한다.