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

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

前回

【 Flutter 】Flutter を 基礎 から 学習 ( Dart編 ) part45 その他の重要な機能

今回からFlutterのウィジェットについて学習していきます。

基本的なウィジェット

Textウィジェット

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) {
    var _name = 'Raika';
    // ★
    var txt = Text(
      '$_name さんこんにちは! はうあーゆー?', // 表示する文字列
      textAlign: TextAlign.center,           // 中央に揃える
      overflow: TextOverflow.ellipsis,       // テキストが長い文字列の場合、3点リーダー(...)が自動で付与されます
      style: TextStyle(fontWeight: FontWeight.bold),  // 太文字
    );

    return Scaffold(
      appBar: AppBar(title: const Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: txt,
        ),
      ),
    );
  }
}

実行するとこのようになります。

RichTextウィジェット

文字列内でstyleが混在する場合にしようします。

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) {
    var _name = 'Raika';
    var txt = Text(
      '$_name さんこんにちは! はうあーゆー?',
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(fontWeight: FontWeight.bold),
    );
    // ★今回はこちらを使っています。
    var rich = Text.rich(TextSpan(text: 'こんにちは', children: <TextSpan>[
      TextSpan(text: ' 美しい ', style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: ' 世界 ', style: TextStyle(fontWeight: FontWeight.bold)),
    ]));

    return Scaffold(
      appBar: AppBar(title: const Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: rich,
        ),
      ),
    );
  }
}

実行してみました。

最後に

やはり画面があるほうが楽しいですね。
もう一つ、Dartを学習して分かったのはFlutterでもウィジェットオブジェクトを変数に格納して後で使えるということです。
Flutter学習当初は「ネストばかりで読みづらい・・・」と思っていたのでした。

今日はここまで!