Flutter - Layout 만들기(1) (Container, Center, Row, Column, Expanded) [4]

1. Center

Center Layout

 

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: Center(
        child: FlutterLogo(),
      ),
    );
  }
}

MainPage

​ : Center를 이용하여 중앙에 FlutterLogo 출력

​ Center: Widget을 중앙에 배치한다.

​ child: Layout에 들어갈 Widget을 지정한다.

 

 

 

 

2. Container

Container Layout

 

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: Container(
        decoration: BoxDecoration(
          border: Border.all(
            width: 0.5,
            color: Colors.black,
          ),
        ),
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
        margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
        width: 300.0,
        height: 300.0,
        alignment: Alignment.bottomCenter,
        child: FlutterLogo(size: 100),
      ),
    );
  }
}

MainPage

​ : Container를 이용하여 FlutterLogo 출력

​ decoration: Container에 Decoration을 지정한다.

​ - BoxDecoration: border, color, image, borderRadius, boxShadow등을 설정할 수 있다.

​ padding: Container의 padding값을 조정한다.

​ - EdgeInsets.symmetic: 가로 또는 세로의 값을 설정할 수 있다.

​ margin: Container의 margin값을 조정한다.

​ alignment: Container안의 정렬을 할 수있다.

​ - Ailgnment.bottomCenter (아래쪽 중앙을 의미한다. 앞(vertical), 뒤(horizontal))

​ child: Container안에 들어갈 Widget을 지정한다.

 

 

 

 

3. Row

Row Container

 

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: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            FlutterLogo(size: 40),
            FlutterLogo(size: 40),
            FlutterLogo(size: 40),
            FlutterLogo(size: 40),
            FlutterLogo(size: 40),
          ],
        ),
      )
    );
  }
}

MainPage

​ : Row를 이용하여 FlutterLogo 출력

​ Row: 가로정렬의 레이아웃을 생성한다.

​ mainAxisAliment: MainAxisAliment.spaceEvenly: 간격, 정렬등을 설정할 수 있다.

​ children: Row안에 들어갈 Widget들을 설정한다.(리스트 형태로 여러개가 들어갈 수 있다.)

 

 

 

 

4. Column

Column Container

 

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: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            FlutterLogo(size: 40),
            FlutterLogo(size: 40),
            FlutterLogo(size: 40),
            FlutterLogo(size: 40),
            FlutterLogo(size: 40),
          ],
        ),
      )
    );
  }
}

MainPage

​ : Column를 이용하여 FlutterLogo 출력

​ Column: 가로정렬의 레이아웃을 생성한다.

​ mainAxisAliment: MainAxisAliment.spaceEvenly: 간격, 정렬등을 설정할 수 있다.

​ children: Column안에 들어갈 Widget들을 설정한다.(리스트 형태로 여러개가 들어갈 수 있다.)

 

 

 

 

5. Expanded

Expanded

 

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: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(child: FlutterLogo(size: 200)),
            Expanded(child: FlutterLogo(size: 60)),
            Expanded(child: FlutterLogo(size: 30)),
            Expanded(child: FlutterLogo(size: 60)),
            Expanded(child: FlutterLogo(size: 30)),
          ],
        ),
      )
    );
  }
}

MainPage

​ : Row에 Expanded를 이용하여 FlutterLogo 출력

​ Expanded: 사이즈가 달라도 모두 같은 크기로 처리할 수 있다.