【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part47 Multi-child layout widgets

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

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part46 Multi-child layout widgets

引き続き、Multi-child layout widgetsについて学びます。

Multi-child layout widgets

Column, Rowウィジェット

CrossAxisAlignmentプロパティ

CrossAxisAlignment.baseline

CrossAxisAlignment.baselineは異なる大きさの文字列をそろえる場合に使用する・・・どういうこでしょうか？
まずはCrossAxisAlignment.baselineを使用しないで実装してみます。

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

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テスト中です。'),
        ),
        body: Container(
          alignment: Alignment.center,
          height: 100,
          color: Colors.yellow,
          child: Row(
            // このプロパティが重要です。無いと実行時エラーになりました。
            textBaseline: TextBaseline.ideographic,
            // crossAxisAlignment: CrossAxisAlignment.baseline, // ★
            children: <Widget>[
              // Text('漢字A',style: Theme.of(context).textTheme.display3), // display3は非推奨となったようです。
              Text('漢字A', style: Theme.of(context).textTheme.headline3),
              // Text('漢字B',style: Theme.of(context).textTheme.body1), // body1は非推奨となったようです。
              Text('漢字A', style: Theme.of(context).textTheme.bodyText1),
            ],
          ),
        ),
      ),
    );
  }

  // Container myContainer({String name = "hoge", double size = 50}) {
  //   return Container(
  //     margin: const EdgeInsets.all(8),
  //     width: size,
  //     height: size,
  //     color: Colors.grey,
  //     child: Text(
  //       name,
  //       //style: Theme.of(context).textTheme.headline6,
  //     ),
  //   );
  // }
}

以下のような結果になります。
「漢字B」に注目してください。
「漢字A」の大きさの中間くらいの位置に中心があり表示されています。
それぞれのウィジェットで「中央」がバラバラの状態のようです。

CrossAxisAlignment.baselineを有効にしてみます。

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

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テスト中です。'),
        ),
        body: Container(
          alignment: Alignment.center,
          height: 100,
          color: Colors.yellow,
          child: Row(
            // このプロパティが重要です。無いと実行時エラーになりました。
            textBaseline: TextBaseline.ideographic,
            crossAxisAlignment: CrossAxisAlignment.baseline, // ★
            children: <Widget>[
              // Text('漢字A',style: Theme.of(context).textTheme.display3), // display3は非推奨となったようです。
              Text('漢字A', style: Theme.of(context).textTheme.headline3),
              // Text('漢字B',style: Theme.of(context).textTheme.body1), // body1は非推奨となったようです。
              Text('漢字B', style: Theme.of(context).textTheme.bodyText1),
            ],
          ),
        ),
      ),
    );
  }

  // Container myContainer({String name = "hoge", double size = 50}) {
  //   return Container(
  //     margin: const EdgeInsets.all(8),
  //     width: size,
  //     height: size,
  //     color: Colors.grey,
  //     child: Text(
  //       name,
  //       //style: Theme.of(context).textTheme.headline6,
  //     ),
  //   );
  // }
}

今度は「漢字A」と「漢字B」ともに「下揃え」になりました。(これがbaselineの所以なのでしょうかね)

最後に

Column、Rowウィジェットは使用頻度が高く、プロパティも豊富です。
全部覚える必要はないと思いますが主要プロパティは覚えておきたいものです。

今日はここまで！

未分類Android,Flutter,iOS,Web,デスクトップ

Posted by raika@blog