2020/10/19 Flutter : Icon widgetの訳

IconウィジェットはUIとしてのグラフィカルなシンボル(つまりアイコン)を表示します。

sample1-1

//sample1-1
//main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline:TextBaseline.alphabetic,
        children: <Widget>[
          Icon(
            Icons.widgets,
            size: 100,
            color: Colors.blue,
          ),
          Icon(
            Icons.widgets,
            size: 100,
            color: Colors.red,
          ),


        ],
      ),
    );
  }
}

↓result

sample1-2(RowウィジェットのmainAxisAlignmentプロパティをコメントアウト)

//sample1-2
//main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline:TextBaseline.alphabetic,
        children: <Widget>[
          Icon(
            Icons.widgets,
            size: 100,
            color: Colors.blue,
          ),
          Icon(
            Icons.widgets,
            size: 100,
            color: Colors.red,
          ),


        ],
      ),
    );
  }
}

↓result

コメントアウトしたら上記のようになったのでデフォルト値は

MainAxisAlignment.start

ということですかね。コンストラクタを見ればわかるわけですが(笑)

mainAxisAlignmentプロパティの値を他の値に変えて表示を確認してみましょう。

参考

https://flutter.dev/docs/codelabs/layout-basics

https://flutter.dev/docs/codelabs/layout-basics#icon-widgethttps://flutter.dev/docs/codelabs/layout-basics#icon-widget