24
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

FlutterのsetStateとは?

はじめに

FlutterのsetStateをFlutter起動時に作成されているカウントアプリを使い解説。

ざっくりsetStateとは?

更新を伝えるメソッド

詳細は以下で説明。

カウントアプリの機能

+ボタンを押すと現在0が表示されている部分が1ずつ増えていく
スクリーンショット 2019-01-30 14.47.38.png

カウントアプリコード全体

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: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;


  void _incrementCounter() {

    /////////////////////////
    setState(() {

      _counter++;
    });
    /////////////////////////

  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(

        //ボタンを押した時に呼ばれる処理。setStateが呼び出される。
        onPressed: _incrementCounter,

        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

解説

main.dart
 floatingActionButton: FloatingActionButton(

        //ボタンを押した時に呼ばれる処理。setStateが呼び出される。
        onPressed: _incrementCounter,

        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),

ここのonPressed: incrementCounterは、+ボタンを押したら incrementCounterを呼び出すという処理。

main.dart
void _incrementCounter() {

    setState(() {

      _counter++;
    });

  }

そして呼び出されたincrementCounterは、setStateが組み込まれている。setStateの引数であるcounter++は、表示されている数字に1を足す処理。setStateではこの足したことをクラスに伝えるということをしている。この伝える処理があることで+ボタンを押すと表示される数字が増えている。setStateがないと+ボタンを押しても画面が更新されず表示されている数字が増えない。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
24
Help us understand the problem. What are the problem?