Flutter DropdownButton未由setState更新

Question

I have this flutter code. When I select new item from dropdown list, the value of _selectedCurrency is updated, but the dropdown button itself not updated. The item shown is always USD .

import 'package:flutter/material.dart';

import 'coin_data.dart' as coinData;

class PriceScreen extends StatefulWidget {
  @override
  _PriceScreenState createState() => _PriceScreenState();
}

class _PriceScreenState extends State<PriceScreen> {
  String _selectedCurrency = "USD";
  DropdownButton _currencyDropdownButton;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Coin Ticker'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            height: 150.0,
            alignment: Alignment.center,
            padding: EdgeInsets.only(bottom: 30.0),
            color: Colors.lightBlue,
            child: _currencyDropdownButton,
          ),
        ],
      ),
    );
  }

  @override
  void initState() {
    super.initState();

    _currencyDropdownButton = DropdownButton<String>(
      value: _selectedCurrency,
      items:
          coinData.currenciesList.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
      onChanged: (value) {
        setState(() {
          _selectedCurrency = value;
        });
      },
    );
  }
}

But if I created the DropdownButton widget inside build() then everything works fine, like this

import 'package:flutter/material.dart';

import 'coin_data.dart' as coinData;

class PriceScreen extends StatefulWidget {
  @override
  _PriceScreenState createState() => _PriceScreenState();
}

class _PriceScreenState extends State<PriceScreen> {
  String _selectedCurrency = "USD";
  DropdownButton _currencyDropdownButton;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Coin Ticker'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            height: 150.0,
            alignment: Alignment.center,
            padding: EdgeInsets.only(bottom: 30.0),
            color: Colors.lightBlue,
            child: DropdownButton<String>(
              value: _selectedCurrency,
              items: coinData.currenciesList
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (value) {
                setState(() {
                  _selectedCurrency = value;
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}

I'm trying to make my code neat, by not create everything on build() .
Is creating the widget on initState() is correct way in flutter?

Thanks

Answer 1

why would you want to put your widget inside initState() ? in rebuild progress, only widgets inside build() will get updated but you created an immutable widget inside init. I offer you using the provider package. create a new StatelessWidget class and use ChangeNotifierProvider<String>() in root to rebuild your widget on every change.

Answer 2

No initState is called only once, while building, you can not change if you declare inside, it might possible with GlobalKey only.try with GlobalKey . and when setState(); , is called build method get update. so we have to put widget inside build method only.