Flutter 〜各ウィジェットの動作検証用コード〜

各Widgetの動作を確認するためのコードを作成してみた。
「final sample = 」の部分で確認したいWidgetを書く、という使い方。
もっと簡単なのができたら更新予定。

例えばTextField。

import 'package:flutter/material.dart';

// アプリケーションのエントリーポイント
void main() {
  runApp(const MyApp());
}

// アプリ全体を構成するMyAppクラス
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // ★★★表示するウィジェットを指定。ここではTextFieldウィジェットを使用★★★
    final sample = TextField(
      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: 'Enter a search term',
      ),
    );
    return MaterialApp(
        // homeプロパティにWidgetTesterウィジェットを設定
        home: WidgetTester(
      child: sample,
    ));
  }
}

// 任意のウィジェットを中央に表示するためのWidgetTesterクラス
class WidgetTester extends StatelessWidget {
  final Widget child;

  // コンストラクタでchildウィジェットを受け取る
  const WidgetTester({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // AppBarのタイトルを設定
        title: const Text('Widget Tester'),
      ),
      // 受け取ったchildウィジェットを画面中央に表示
      body: Center(
        child: child,
      ),
    );
  }
}

表示結果。

Iconの場合。sampleの変数の部分だけを変更。

import 'package:flutter/material.dart';

// アプリケーションのエントリーポイント
void main() {
  runApp(const MyApp());
}

// アプリ全体を構成するMyAppクラス
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // ★★★表示するウィジェットを指定。ここではIconウィジェットを使用★★★
    final sample = Icon(
      Icons.favorite,
      size: 40,
    );
    return MaterialApp(
        // homeプロパティにWidgetTesterウィジェットを設定
        home: WidgetTester(
      child: sample,
    ));
  }
}

// 任意のウィジェットを中央に表示するためのWidgetTesterクラス
class WidgetTester extends StatelessWidget {
  final Widget child;

  // コンストラクタでchildウィジェットを受け取る
  const WidgetTester({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // AppBarのタイトルを設定
        title: const Text('Widget Tester'),
      ),
      // 受け取ったchildウィジェットを画面中央に表示
      body: Center(
        child: child,
      ),
    );
  }
}

表示結果