【Flutter】Widgetの自作方法
StatelessWidgetを継承し、buildメソッドをオーバーライドすることで自作Widgetのクラスを定義します。外部から与えるプロパティもクラスのメンバとして定義できるとのこと。以下、自作Widgetの例です。MyContanerクラスが自作Widgetのクラスです。
copy_all
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のクラスのひな形が作成されます。