【Flutter】Widgetの自作方法

StatelessWidgetを継承し、buildメソッドをオーバーライドすることで自作Widgetのクラスを定義します。外部から与えるプロパティもクラスのメンバとして定義できるとのこと。以下、自作Widgetの例です。MyContanerクラスが自作Widgetのクラスです。


main.dartimport 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        title: 'MyApp',
        home: Scaffold(
            body: Center(
                child: MyContainer(
          color: Colors.green,
          text: 'テストです',
        ))));
  }
}

class MyContainer extends StatelessWidget {
  const MyContainer({super.key, required this.color, required this.text});

  final Color color;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: color,
      child: Center(
        child: Text(text),
      ),
    );
  }
}

VSCodeでは"stless"と入力することで自作Widgetのクラスのひな形が作成されます。