ブラウザでFlutter!！- 2　縦、横に並べる。

レイアウトについてまとめていきたいと思います。まず基本のテンプレートから始めます。

Write your first Flutter app, part 1

これを実行すると画面上には"Hello World"が表示されます。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Column (縦に並べる)・・Row (横に並べる)を設置する場合は"Column"のところを"Row"に変えてやればOKです。

ここで少しわかりにくいchild, childrenとの違いを。childは1つのwidgetを、childrenは複数のwidgetを持つことができるということです。縦に複数並べる時にはchildrenをつけて書きます。

Flutter Column Tutorial

基本の書き方は

Column(
  children: const <Widget>[
    //some widgets
  ],
)

ということで、

body:Center()

の()内にColumnの内容を入れます。

children: const <Widget>[
　　Text('Hello'),
　　Text('Flutter'),],

全体のコードは

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Column( 
              children: const <Widget>[
                Text('Hello'),
                Text('Flutter'),
             ],
          )
        ),
      ),
    );
  }
}

表示させると

上の方にくっついてしまいます。これを中央に持ってくには

mainAxisSize: MainAxisSize.min,

を追加します。

   child: Column(
           mainAxisSize: MainAxisSize.min,
              children: const <Widget>[
                Text('Hello'),
                Text('Flutter'),
             ],
          )

とすると

中央に配置されます。あと他の方法で"mainAxisAlignment"を使って、

mainAxisAlignment: MainAxisAlignment.center,

としtも中央に配置されます。こちらの方は位置を指定するもので"mainAxisSize:"は余白の調整で中央に来るように設定できるようです。

FlutterのMain AxisとCross Axisを一発で覚えるには

ColumnとRowではMainの設定がColumnは縦方向、Rowでは横方向となることを覚えておけば良さそうです。

おまけ。

文字の大きさなどは"style: TextStyle()"で設定します。

  Text('Flutter',style: TextStyle(fontSize: 30,),),

文字色は

 Text('Flutter',style: TextStyle(fontSize: 30,),color: Colors.blue),

こんな感じになります。