본문 바로가기
컴퓨터/Flutter

[Flutter] 레이아웃 연습

by 우유식빵 2020. 5. 16.

플러터 레이아웃 연습

플러터 레이아웃 연습한 모습

코드는 이하와 같음

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                color: Colors.red,
                width:100,
              ),
              Container(
                child:Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
                   Container(
                     color:Colors.yellow,
                     width:100,
                     height:100,
                   ),
                   Container(
                     color:Colors.green,
                     width:100,
                     height:100,
                   ),
                 ],
                )
              ),
              Container(
                color: Colors.blue,
                width:100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

댓글