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

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

前回

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

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

基本的なウィジェット

Text,RichTextウィジェット

softWrapプロパティ

softWrapプロパティは「折り返し」を決定するプロパティです。デフォルトはtrue(折り返す)です。
false(折り返さない)の場合はoverflowプロパティと一緒に使うのが良いそうです。

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(
              "ああああああああああああああああああああああああああああああああああああああ",
              softWrap: true, // 「折り返す」を指定しています。デフォルト値です。
            ),
          ),
          Container(
            width: double.infinity,
            color: Colors.red,
            child: const Text(
              "いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい",
              softWrap: false, // 「折り返さない」を指定しています。
            ),
          ),
        ],
      ),
    );
  }
}

実行すると「いいい・・・」の方は折り返していないことがわかります。
画面外にはみ出しているんでしょうかね。

overflowプロパティ

overflowプロパティは親ウィジェットからはみ出る文字列の扱いをコントロールするプロパティになります。
やはりはみ出していたんですね😅
以下のようなコントロールが可能なようです。

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(
              "ああああああああああああああああああああああああああああああああああああああ",
              softWrap: false,
              overflow: TextOverflow.clip, // 効果不明・・・
            ),
          ),
          Container(
            width: double.infinity,
            color: Colors.red,
            child: const Text(
              "いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい",
              softWrap: false,
              overflow: TextOverflow.fade, // 末尾の文字がす~っと消えています。
            ),
          ),
          Container(
            width: double.infinity,
            color: Colors.green,
            child: const Text(
              "ううううううううううううううううううううううううううううううううううううう",
              softWrap: false,
              overflow: TextOverflow.ellipsis, // 末尾が「...」になります。
            ),
          ),
          Container(
            width: double.infinity,
            color: Colors.red,
            child: const Text(
              "えええええええええええええええええええええええええええええええええええええ",
              softWrap: false,
              overflow: TextOverflow.visible, // 効果不明・・・
            ),
          ),
        ],
      ),
    );
  }
}

一部(clip,visible)効果がわかりませんでした…。

 

最後に

このあたりはHTMLの学習をしているみたいですね。
今日はここまで!