Flutterを使用する際に最初に疑問に思うことが、StatefulWidgetとStatelessWidgetの違いである。この記事ではそれぞれの違いや使い方について説明する。
違いについて
簡単に言うとステート（状態）を持つWidgetか持たないWidgetかという違いである。動的に変わる部分があるWidgetに関してはStatefulを使い、そうでなければStatelessを使うと思っていれば良い気がする。端的に言うのであれば、静的がStateless, 動的がStatefulで良い気がしている。
使い方の大きく違う部分としては、setStateが使用できるか否かにあると私は考えている。ある値がボタンや操作によって更新された時に表示される値を更新したい場合、setStateを用いて再描画することがよく使われる手法である。しかし、このsetStateはStatelessWidgetだと使えないのである。つまり、このような処理でsetStateを使いたいと考えている場合は、StatefulWidgetを使うと覚えておけば良いのである。
宣言の仕方についても違いがある。Statelessの場合単純に
class SamplePage extends StatelessWidget{
SamplePage({super.key}) ;
@override
Widget build(BuildContext context){
...
}宣言してあげれば良いが、Statefulの場合はそうはいかないのである。
class SamplePage extends StatefulWidget {
const SamplePage({Key? key}) : super(key: key);
@override
State<SamplePage> createState() => _SamplePageState();
}
class _SamplePageState extends State<SamplePage>{
@override
Widget build(BuildContext context){
...
}
}Stateの宣言も必要になってくる。詳しいことはググって欲しいが、使う際はよくあるおまじないと思って宣言するようにして欲しい。
今まで、動的に変わる部分があるWidgetに関してはStatefulを使うように言ってきたが、ここで1つ注意しなければいけない点がある。それはStatefulWidgetはStateを1：1の関係でしか管理できないことである。他のStatefulWidgetとStateを共有ということはできないのである。このような場合に出てくるのがProviderである。これは親のWidgetから子Widgetに状態を渡すことができるような機能で、これを使えばStateの共有ができるだけではなく、StatefulWidgetを使う必要がなくなるのである。このProviderについては別の記事にまとめたいと思う。
まとめ
色々述べたがまとめると以下の通りである。この辺りは大事な概念なのでしっかり理解したい。
それぞれの違いはステート（状態）を持つか持たないかという違いであり、setStateを使用したい場合は、Statefulを使用すればよい。しかし、StatefulはStateを１：１での管理しかできないため、複数で管理したい場合はProviderを用いればよい。Providerを使用するとStatelessWidgetを使用できる。
コメント