【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part04 基本的なウィジェット

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part04 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part03 基本的なウィジェット

引き続き、基本的なウィジェットについて学習します。

基本的なウィジェット

Text,RichTextウィジェット

textAlignプロパティ

文字列の水平方向の位置を決めます。
この確認を行う場合、ウィジェットの(?)横幅が大事です。

今回は最大にして確認しました。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // home: MyHomePage(title: 'Flutter Demo Home Page'),
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final TextTheme textTheme = theme.textTheme;
    final titleStyle =
        textTheme.headline6!.copyWith(color: theme.backgroundColor);

    return Scaffold(
      appBar: AppBar(
          title: Text(
        'First Page',
        style: titleStyle,
      )),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            width: double.infinity, // 横幅を決めています。「最大」ということです。
            color: Colors.green,
            child: const Text(
              "ABC",
              textAlign: TextAlign.left, // 水平方向に左寄せです。
            ),
          ),
          Container(
            width: double.infinity,
            color: Colors.red,
            child: const Text(
              "ABC",
              textAlign: TextAlign.center, // 水平方向に中央寄せです。
            ),
          ),
          Container(
            width: double.infinity, // 横幅を決めています。「最大」ということです。
            color: Colors.grey,
            child: const Text(
              "ABC",
              textAlign: TextAlign.right, // 水平方向に右寄せです。
            ),
          ),
        ],
      ),
    );
  }
}

こんな感じです。

最後に

ここから少しの間細かなプロパティの記述が続いています。
時間があればまとめてやりたい・・・!

今日はここまで!