Flutter-ephemeral-state-management

提供：Dev Guides
移動先:案内、検索

フラッター-一時的な状態管理

_Flutter_アプリケーションはウィジェットで構成されているため、状態管理もウィジェットによって行われます。 状態管理のエントリポイントはStatefulwidgetです。 ウィジェットをStatefulwidgetから継承して、その状態とその子の状態を維持できます。 Statefulwidgetには、ウィジェットがcreateStateメソッドを介して初めて作成されたときに状態State（Tは継承されたウィジェット）を作成するオプションがあり、必要に応じて状態を変更するメソッドsetStateが提供されます。 状態の変更は、ジェスチャーによって行われます。 たとえば、製品の評価を変更するには、評価ウィジェットで星をタップします。

状態を維持するウィジェット、RatingBoxを作成しましょう。 ウィジェットの目的は、特定の製品の現在の評価を表示することです。 状態の維持とRatingBoxウィジェットを作成するためのステップバイステップのプロセスは次のとおりです-

  • StatefulWidgetを継承して、RatingBoxウィジェットを作成します。
class RatingBox extends StatefulWidget { }
  • State <T>を継承して、RatingBox、_RatingBoxStateの状態を作成します
class _RatingBoxState extends State<RatingBox> { }
  • StatefulWidgetメソッドのcreateStateをオーバーライドして、状態_RatingBoxStateを作成します。
class RatingBox extends StatefulWidget {
   @override
   _RatingBoxState createState() => _RatingBoxState();
}

_RatingBoxStateのビルドメソッドでRatingBoxウィジェットのユーザーインターフェイスを作成します。 通常、ユーザーインターフェイスは、RatingBoxウィジェット自体のビルドメソッドで実行されます。 ただし、状態の維持が必要な場合は、_RatingBoxStateウィジェットにユーザーインターフェイスを構築する必要があります。 これにより、ウィジェットの状態が変更されるたびにユーザーインターフェイスが再レンダリングされます。 

Widget build(BuildContext context) {
   double _size = 20;
   print(_rating);

   return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
         Container(
            padding: EdgeInsets.all(0),
            child: IconButton(
               icon: (_rating >= 1 ? Icon(Icons.star, size: _size,) :
               Icon(Icons.star_border, size: _size,)),
               color: Colors.red[500],
               iconSize: _size,
            ),
         ), Container(
            padding: EdgeInsets.all(0),
            child: IconButton(
               icon: (_rating >= 2 ? Icon(Icons.star, size: _size,) :
               Icon(Icons.star_border, size: _size,)),
               color: Colors.red[500],
               iconSize: _size,
            ),
         ), Container(
            padding: EdgeInsets.all(0),
            child: IconButton(
               icon: (_rating >= 3 ? Icon(Icons.star, size: _size,) :
               Icon(Icons.star_border, size: _size,)),
               color: Colors.red[500],
               iconSize: _size,
            ),
         ),
      ],
   );
}

ここでは、IconButtonウィジェットを使用して作成された3つの星を使用し、Rowウィジェットを使用して1行に配置しました。 アイデアは、一連の赤い星で評価を示すことです。 たとえば、評価が2つ星の場合、最初の2つの星は赤になり、最後の星は白になります。

  • _RatingBoxStateにメソッドを記述して、ウィジェットの状態を変更/設定します。
void _setRatingAsOne() {
   setState( () {
      _rating = 1;
   });
}
void _setRatingAsTwo() {
   setState( () {
      _rating = 2;
   });
}
void _setRatingAsThree() {
   setState( () {
      _rating = 3;
   });
}
  • ここで、各メソッドは、setStateを介してウィジェットの現在の評価を設定します。
  • ユーザーのジェスチャー（星をタップ）を適切な状態変更メソッドに配線します。
Widget build(BuildContext context) {
   double _size = 20;
   print(_rating);

   return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
         Container(
            padding: EdgeInsets.all(0),
            child: IconButton(
               icon: (_rating >= 1 ? Icon(Icons.star, size: _size,) :
               Icon(Icons.star_border, size: _size,)),
               color: Colors.red[500],
               onPressed: _setRatingAsOne,
               iconSize: _size,
            ),
         ),
         Container(
            padding: EdgeInsets.all(0),
            child: IconButton(
               icon: (_rating >= 2 ? Icon(Icons.star, size: _size,) :
               Icon(Icons.star_border, size: _size,)),
               color: Colors.red[500],
               onPressed: _setRatingAsTwo,
               iconSize: _size,
            ),
         ),
         Container(
            padding: EdgeInsets.all(0),
            child: IconButton(
               icon: (_rating >= 3 ? Icon(Icons.star, size: _size,) :
               Icon(Icons.star_border, size: _size,)),
               color: Colors.red[500],
               onPressed: _setRatingAsThree,
               iconSize: _size,
            ),
         ),
      ],
   );
}

ここで、onPressedイベントは関連する関数を呼び出して状態を変更し、その後ユーザーインターフェイスを変更します。 たとえば、ユーザーが3番目の星をクリックすると、_setRatingAsThreeが呼び出され、_ratingが3に変更されます。 状態が変更されるため、ビルドメソッドが再度呼び出され、ユーザーインターフェイスがビルドされて再度レンダリングされます。

  • ウィジェットの完全なコード、RatingBoxは次のとおりです-
class RatingBox extends StatefulWidget {
   @override
   _RatingBoxState createState() => _RatingBoxState();
}
class _RatingBoxState extends State<RatingBox> {
   int _rating = 0;
   void _setRatingAsOne() {
      setState( () {
         _rating = 1;
      });
   }
   void _setRatingAsTwo() {
      setState( () {
         _rating = 2;
      });
   }
   void _setRatingAsThree() {
      setState( () {
         _rating = 3;
      });
   }
   Widget build(BuildContext context) {
      double _size = 20;
      print(_rating);
      return Row(
         mainAxisAlignment: MainAxisAlignment.end,
         crossAxisAlignment: CrossAxisAlignment.end,
         mainAxisSize: MainAxisSize.max,
         children: <Widget>[
            Container(
               padding: EdgeInsets.all(0),
               child: IconButton(
                  icon: (_rating >= 1 ? Icon(Icons.star, size: _size,) :
                  Icon(Icons.star_border, size: _size,)),
                  color: Colors.red[500],
                  onPressed: _setRatingAsOne,
                  iconSize: _size,
               ),
            ),
            Container(
               padding: EdgeInsets.all(0),
               child: IconButton(
                  icon: (_rating >= 2 ? Icon(Icons.star, size: _size,) :
                  Icon(Icons.star_border, size: _size,)),
                  color: Colors.red[500],
                  onPressed: _setRatingAsTwo,
                  iconSize: _size,
               ),
            ),
            Container(
               padding: EdgeInsets.all(0),
               child: IconButton(
                  icon: (_rating >= 3 ? Icon(Icons.star, size: _size,) :
                  Icon(Icons.star_border, size: _size,)),
                  color: Colors.red[500],
                  onPressed: _setRatingAsThree,
                  iconSize: _size,
               ),
            ),
         ],
      );
   }
}

新しいアプリケーションを作成し、新しく作成されたRatingBoxウィジェットを使用して、製品の評価を表示しましょう。

  • Androidスタジオで_product_state_app_に新しい_Flutter_アプリケーションを作成します。

main.dartコードを以下のコードに置き換えます- 

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  //This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ), home: MyHomePage(title: 'Product state demo home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);

   final String title;
   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child: Text( 'Hello World', )
         ),
      );
   }
}
  • ここに、
  • デフォルトのStatefulWidgetの代わりに_StatelessWidget_を拡張して_MyHomePage_ウィジェットを作成し、関連するコードを削除しました。
  • 新しく作成した_RatingBox_ウィジェットを含めます。
  • _ProductBox_ウィジェットを作成して、以下に指定されている評価とともに製品をリストします-
class ProductBox extends StatelessWidget {
   ProductBox({Key key, this.name, this.description, this.price, this.image})
   : super(key: key);

   final String name;
   final String description;
   final int price;
   final String image;

   Widget build(BuildContext context) {
      return Container(
         padding: EdgeInsets.all(2),
         height: 120,
         child: Card(
            child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: <Widget>[
                  Image.asset("assets/appimages/" + image),
                  Expanded(
                     child: Container(
                        padding: EdgeInsets.all(5),
                        child: Column(
                           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                           children: <Widget>[
                              Text(this.name, style: TextStyle(
                              fontWeight: FontWeight.bold)),
                              Text(this.description),
                              Text("Price: " + this.price.toString()),
                              RatingBox(),
                           ],
                        )
                     )
                  )
               ]
            )
         )
      );
   }
}
  • MyHomePageウィジェットを更新して、以下に指定されているProductBoxウィジェットを含めます-
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text("Product Listing")),
         body: ListView(
            shrinkWrap: true, padding: const EdgeInsets.fromLTRB(2.0, 10.0, 2.0, 10.0),
            children: <Widget>[
               ProductBox(
                  name: "iPhone",
                  description: "iPhone is the stylist phone ever",
                  price: 1000,
                  image: "iphone.png"
               ),
               ProductBox(
                  name: "Pixel",
                  description: "Pixel is the most feature phone ever",
                  price: 800,
                  image: "pixel.png"
               ),
               ProductBox(
                  name: "Laptop",
                  description: "Laptop is most productive development tool",
                  price: 2000,
                  image: "laptop.png"
               ),
               ProductBox(
                  name: "Tablet",
                  description: "Tablet is the most useful device ever for meeting",
                  price: 1500,
                  image: "tablet.png"
               ),
               ProductBox(
                  name: "Pendrive",
                  description: "Pendrive is useful storage medium",
                  price: 100,
                  image: "pendrive.png"
               ),
               ProductBox(
                  name: "Floppy Drive",
                  description: "Floppy drive is useful rescue storage medium",
                  price: 20,
                  image: "floppy.png"
               ),
            ],
         )
      );
   }
}
  • アプリケーションの完全なコードは次のとおりです-
import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  //This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage( title: 'Product layout demo home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);

   final String title;
   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text("Product Listing")),
         body: ListView(
            shrinkWrap: true,
            padding: const EdgeInsets.fromLTRB(2.0, 10.0, 2.0, 10.0),
            children: <Widget>[
               ProductBox(
                  name: "iPhone",
                  description: "iPhone is the stylist phone ever",
                  price: 1000,
                  image: "iphone.png"
               ),
               ProductBox(
                  name: "Pixel",
                  description: "Pixel is the most featureful phone ever",
                  price: 800,
                  image: "pixel.png"
               ),
               ProductBox(
                  name: "Laptop",
                  description: "Laptop is most productive development tool",
                  price: 2000,
                  image: "laptop.png"
               ),
               ProductBox(
                  name: "Tablet",
                  description: "Tablet is the most useful device ever for meeting",
                  price: 1500,
                  image: "tablet.png"
               ),
               ProductBox(
                  name: "Pendrive",
                  description: "iPhone is the stylist phone ever",
                  price: 100,
                  image: "pendrive.png"
               ),
               ProductBox(
                  name: "Floppy Drive",
                  description: "iPhone is the stylist phone ever",
                  price: 20,
                  image: "floppy.png"
               ),
               ProductBox(
                  name: "iPhone",
                  description: "iPhone is the stylist phone ever",
                  price: 1000,
                  image: "iphone.png"
               ),
               ProductBox(
                  name: "iPhone",
                  description: "iPhone is the stylist phone ever",
                  price: 1000,
                  image: "iphone.png"
               ),
            ],
         )
      );
   }
}
class RatingBox extends StatefulWidget {
   @override
   _RatingBoxState createState() =>
   _RatingBoxState();
}
class _RatingBoxState extends State<RatingBox> {
   int _rating = 0;
   void _setRatingAsOne() {
      setState( () {
         _rating = 1;
      });
   }
   void _setRatingAsTwo() {
      setState( () {
         _rating = 2;
      });
   }
   void _setRatingAsThree() {
      setState( () {
         _rating = 3;
      });
   }
   Widget build(BuildContext context) {
      double _size = 20;
      print(_rating);
      return Row(
         mainAxisAlignment: MainAxisAlignment.end,
         crossAxisAlignment: CrossAxisAlignment.end,
         mainAxisSize: MainAxisSize.max,
         children: <Widget>[
            Container(
               padding: EdgeInsets.all(0),
               child: IconButton(
                  icon: (_rating >= 1 ? Icon(Icons.star, size: _size,) :
                  Icon(Icons.star_border, size: _size,)),
                  color: Colors.red[500],
                  onPressed: _setRatingAsOne,
                  iconSize: _size,
               ),
            ),
            Container(
               padding: EdgeInsets.all(0),
               child: IconButton(
                  icon: (_rating >= 2 ? Icon(Icons.star, size: _size,) :
                  Icon(Icons.star_border, size: _size,)),
                  color: Colors.red[500],
                  onPressed: _setRatingAsTwo,
                  iconSize: _size,
               ),
            ),
            Container(
               padding: EdgeInsets.all(0),
               child: IconButton(
                  icon: (_rating >= 3 ? Icon(Icons.star, size: _size,) :
                  Icon(Icons.star_border, size: _size,)),
                  Colors.red[500],
                  onPressed: _setRatingAsThree,
                  iconSize: _size,
               ),
            ),
         ],
      );
   }
}
class ProductBox extends StatelessWidget {
   ProductBox({Key key, this.name, this.description, this.price, this.image}) :
   super(key: key);
   final String name;
   final String description;
   final int price;
   final String image;
   Widget build(BuildContext context) {
      return Container(
         padding: EdgeInsets.all(2),
         height: 140,
         child: Card(
            child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: <Widget>[
                  Image.asset("assets/appimages/" + image),
                  Expanded(
                     child: Container(
                        padding: EdgeInsets.all(5),
                        child: Column(
                           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                           children: <Widget>[
                              Text(this.name, style: TextStyle(fontWeight: FontWeight.bold)),
                              Text(this.description),
                              Text("Price: " + this.price.toString()),
                              RatingBox(),
                           ],
                        )
                     )
                  )
               ]
            )
         )
      );
   }
}

状態管理

評価の星をクリックすると、製品の評価が更新されます。 たとえば、_iPhone_に2つ星の評価を設定すると、以下のような評価が表示されます-

Rating Star

「https://www.finddevguides.com/index.php?title=Flutter-ephemeral-state-management&oldid=23546」から取得
Powered by MediaWiki