Flutter 기초강좌 Column함수와 Row함수 중첩하기

안녕하세요, 오늘은 지난 시간에 배웠던 Column함수와 Row함수를 중첩하여 사용하는 법을 알아보도록 하겠습니다.

 

먼저, 예제와 소스코드를 먼저 보여드리겠습니다.

 

 body: Container(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Square(),
                Square(),
                Square(),
              ],
            ),
            Row(
              children: <Widget>[
                Square(),
                Square(),
                Square(),
              ],
            ),
            Row(
              children: <Widget>[
                Square(),
                Square(),
                Square(),
              ],
            ),
          ],
        ),

예시를 보시면 바디 부분에서 Container이라는 틀 안에 또 다른 틀인 child:Column을 설정하고

또 Column1개안에 children 인 Row 3개가 레이아웃 된 것을 알 수 있습니다.

이처럼 레이아웃 함수중첩을 활용하여 여러 레이아웃 디자인을 효과 적으로 할 수 있습니다.

 

 

(전체 코드)

import 'package:flutter/cupertino.dart';
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,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('mainAxisAlignment')
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Square(),
                Square(),
                Square(),
              ],
            ),
            Row(
              children: <Widget>[
                Square(),
                Square(),
                Square(),
              ],
            ),
            Row(
              children: <Widget>[
                Square(),
                Square(),
                Square(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class Square extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.yellow,
        border: Border.all(),
      ),
    );
  }
}