Flutter入門 | Widgetの基本！！

今回は公式ドキュメントをもとにFlutterのUI を構成する各要素のWidgetの基本について解説していきたいと思います！！

Widgetとは

FlutterはよくすべてがWidgetであるといわれます。

WidgetとはFlutter アプリのユーザーインターフェースの構成要素であり、各Widgetはユーザーインターフェースの一部です。

Widgetは、構成に基づいて階層を形成します。各Widgetは親の中にネストされ、親からコンテキストを受け取ることができます。この構造は、次の簡単な例に示すように、ルートの Widgetまで続きます。


     import 'package:flutter/material.dart';
     import 'package:flutter/services.dart';

     void main() => runApp(const MyApp());

     class MyApp extends StatelessWidget {
       const MyApp({super.key});

       @override
       Widget build(BuildContext context) {
         return MaterialApp( // Root widget
           home: Scaffold(
             appBar: AppBar(
               title: const Text('My Home Page'),
             ),
             body: Center(
               child: Builder(
                 builder: (context) {
                   return Column(
                     children: [
                       const Text('Hello, World!'),
                       const SizedBox(height: 20),
                       ElevatedButton(
                         onPressed: () {
                           print('Click!');
                         },
                         child: const Text('A button'),
                       ),
                     ],
                   );
                 },
               ),
             ),
           ),
         );
       }
     }

Widgetの構成

前述のように、Flutter はWidgetを構成単位として重視しています。Widgetは通常、他の多くの小さな単一目的のWidgetで構成され、それらを組み合わせることで強力な効果を生み出します。

前の例のコードを実行すると、Flutter は画面の中央に「Hello, World!」というテキストが垂直に並んだボタンを描画します。これらの要素を配置するために、Center, 使用可能なスペースの中央に子要素を配置するWidgetと、Column, 子要素を次々に垂直に並べるWidgetがあります。

Widgetの構築

Flutter でユーザーインターフェイスを作成するには、
build Widgetオブジェクトのメソッドをオーバーライドします。すべてのWidgetには build メソッドが必要であり、別のWidgetを返す必要があります。たとえば、画面にpadding付きのテキストを追加する場合は、次のように記述します。


     class PaddedText extends StatelessWidget {
       const PaddedText({super.key});

        @override
       Widget build(BuildContext context) {
         return Padding(
           padding: const EdgeInsets.all(8.0),
           child: const Text('Hello, World!'),
         );
       }
      }

フレームワークは、このbuild Widgetが作成されたとき、およびこのWidgetの依存関係 (Widgetに渡される状態など) が変更されたときに、メソッドを呼び出します。このメソッドは、すべてのフレームで呼び出される可能性があります。

Widgetの状態

このフレームワークでは、StatefulWidgetとStatelessWidgetという 2 つの主要なWidget クラスが導入されています。

可変状態を持たないWidget (時間の経過とともに変化するクラスプロパティを持たないWidget) は StatelessWidgetのサブクラスです。
Padding、Text、Icon などの多くの組み込みWidgetはステートレスです。

独自のWidgetを作成する場合、ほとんどの場合はStatelessWidgetを作成します。

一方、Widgetの固有の特性がユーザーの操作やその他の要因に基づいて変更する必要がある場合、そのWidgetは状態を持ちます。たとえば、Widgetにユーザーがボタンをタップするたびに増加するカウンターがある場合、カウンターの値はそのWidgetの状態です。その値が変化すると、Widgetを再構築して UI の一部を更新する必要があります。これらのWidgetはStatefulWidget のサブクラスであり、(Widget自体は不変であるため) Stateのサブクラスである別のクラスに可変状態を格納します。StatefulWidgetには buildメソッドがありません。代わりに、以下の例に示すように、そのユーザーインターフェイスはStateオブジェクトを通じて構築されます。


     class CounterWidget extends StatefulWidget {
       @override
       State<CounterWidget> createState() => _CounterWidgetState();
     }

     class _CounterWidgetState extends State<CounterWidget> {
       int _counter = 0;

       void _incrementCounter() {
         setState(() {
           _counter++;
         });
       }
  
       @override
       Widget build(BuildContext context) {
         return Text('$_counter');
       }
     }

オブジェクトを変更するたびにState(たとえば、カウンターを増やすことによって)、 setStateを呼び出して、Stateの buildメソッドを再度呼び出してフレームワークにユーザーインターフェイスを更新するように通知する必要があります。

Widget オブジェクトから状態を分離すると、他のWidgetは状態を失うことを気にすることなく、状態のないWidgetと状態のあるWidgetの両方をまったく同じように扱うことができます。状態を保持するために子を保持する必要がなく、親は子の永続的な状態を失うことなく、いつでも子の新しいインスタンスを作成できます。フレームワークは、適切な場合に既存の状態オブジェクトを見つけて再利用するすべての作業を実行します。

まとめ

今回はWidgetについて解説していきました！！

いかがだったでしょうか？

細かいところが理解できなくても何となくざっと理解していただければ大丈夫です。

次回からレイアウトを作成し、その中身について詳しく見ていきます！！

良きFlutterライフを！！

2025-02-25

0件のコメント

コメントはまだありません。最初の一人になりましょう！

mohumohu studio

みずきの技術＆読書ブログ＆無料ゲーム