2020/10/19 Flutter : Text widgetの訳

Textウィジェットはテキストを表示します。そしてテキストのフォント・サイズ・色などを指定します。

例:テキストを配置する。

下のサンプルは’Hey’を三回表示しますが、それぞれのテキストのサイズと色が違います。RowウィジェットでcrossAxisAlignmentプロパティとtextBaselineプロパティを指定しています。

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.center,
        textBaseline:TextBaseline.alphabetic,
        children: <Widget>[
          Text(
            'Hey,',
            style:TextStyle(
              fontSize: 30,
              fontFamily: 'Futura',
              color: Colors.blue,
            ),
          ),


          Text(
            'Hey!',
            style: TextStyle(
              fontSize: 100,
              fontFamily: 'Futura',
              color: Colors.green,
            ),
          ),


          Text(
            'Hey!',
            style: TextStyle(
              fontSize: 40,
              fontFamily: 'Futura',
              color: Colors.red,
            ),
          ),


        ],
      ),
    );
  }
}

↓result

sample1-2

(CrossAxisAlignment.center を CrossAxisAlignment.baselineに変更)

//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>[
          Text(
            'Hey,',
            style:TextStyle(
              fontSize: 30,
              fontFamily: 'Futura',
              color: Colors.blue,
            ),
          ),


          Text(
            'Hey!',
            style: TextStyle(
              fontSize: 100,
              fontFamily: 'Futura',
              color: Colors.green,
            ),
          ),


          Text(
            'Hey!',
            style: TextStyle(
              fontSize: 40,
              fontFamily: 'Futura',
              color: Colors.red,
            ),
          ),


        ],
      ),
    );
  }
}

↓result

参考

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

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