flutter

flutter 세로 정렬 가로 정렬(Center, mainAxisAlignment)

jin0choi1216 2021. 6. 7. 09:46
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My app', // 앱을 총칭하는 이름
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),     
    home: MyHomePage(),    
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First App'),
        centerTitle: true,
        backgroundColor: Colors.redAccent,
        elevation: 0.0,
      ), // 빈도화지 같은 역활
      body: Center ( // 가로축에서 정렬
        child: Column(
              mainAxisAlignment: MainAxisAlignment.center, // 세로축에서 정렬
              children: <Widget>[
                Text('Hello'),
                Text('Hello'),
                Text('Hello'),
              ],
            ),
          )
        );
  }
}

 

가로 축 정렬은 Center Widgets을 사용해야하고, 

세로 축 정렬이 필요 할 때는 Center Widgets에서 mainAxisAlignment를 불러와야 한다.

 

 

 

강좌링크 :  youtube.com/watch?v=gUVAUOvPm_c&list=PLQt_pzi-LLfpcRFhWMywTePfZ2aPapvyl&index=9