[2023.11.15] 플러터(flutter) 순한 맛 강좌 9 | 위젯정렬

 

<< 소스 코드 >>

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Charactor card',  //앱을 총칭하는 이름, 앱이름(폰 화면에 보여짐)
      home: MyCard(),
    );
  }
}

class MyCard extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('BBANTO'),  //AppBar 타이틀
        centerTitle: true,      //AppBar 타이틀 정렬
        backgroundColor: Colors.redAccent,  //AppBar 타이틀 배경색
        elevation: 0.0,   //AppBar 타이틀이 떠 있는 정도(수치)
      ),

      /*
      //실행화면 #1
      //Padding 위젯으로 시작 위치(여백 지정) 후 
      //mainAxisAlignment으로 세로축 중앙정렬
      body: Padding(
        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0), //
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,  //세로축 정렬
          children: <Widget>[
            Text('Hello'),
            Text('Hello'),
            Text('Hello'),
          ],
        ),
      ),
        */


      //실행화면 #2
      //Padding 위젯을 없애고, Center 위젯을 사용하여 중앙정렬
      //Column 위젯을 가로축 중앙 정렬을 위해서는 Center 위젯 사용
      //Column 위젯을 세로축 중앙 정렬을 위해서는 mainAxisAlignment 속성을 사용
      body:Center(  //가로축 정렬
        child:Column(
          mainAxisAlignment: MainAxisAlignment.center,  //세로축 정렬
          children: <Widget>[
            Text('Hello'),
            Text('Hello'),
            Text('Hello'),
          ],
        ),
      )

    );
  }
}

 

<< 출력 화면 #1 >>

 

<< 출력 화면 #2 >>