66531


下記のようにdarkモードとlightモードを切り替えるコードで  
Theme.of(context).primaryColorが切り替わらないのは何故ですか？  
また、正しくdarkモードとlightモードで切り替えたい場合どのように記載するのが良いですか？

[code]

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatefulWidget {
      MyAppState createState() => MyAppState();
    }
    
    class MyAppState extends State<MyApp> {
      bool dark = false;
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: dark ? ThemeData.dark() : ThemeData.light(),
          home: Scaffold(
              appBar: AppBar(title: Text('Toggle theme sample')),
              body: ListView(
                padding: const EdgeInsets.all(8),
                children: <Widget>[
                  SwitchListTile(
                    value: dark,
                    title: const Text('DarkTheme'),
                    onChanged: (bool v) => setState(() => dark = v),
                  ),
                  Row(children: [
                    Text('primaryColor'),
                    Container(
                        width: 20,
                        height: 20,
                        color: Theme.of(context).primaryColor)
                  ]),
                  Row(children: [
                    Text('accentColor'),
                    Container(
                        width: 20,
                        height: 20,
                        color: Theme.of(context).backgroundColor)
                  ]),
                ],
              )),
        );
      }
    }
    
[/code]

[![screenrecord](https://i.stack.imgur.com/s3oDO.gif)](https://i.stack.imgur.com/s3oDO.gif)


CC BY-SA 4.0
2020-04-19T09:01:24.823
65753
2020-05-12T06:13:14.573
32285
question
flutter
flutterのThemeData切り替えが反映されない


`Builder`Widgetで囲んであげるとできます。  
同一メソッド内の`Theme.of(context)`では、MaterialAppの`context`を参照できていないことが原因です。  
こちらの動画が参考になるかと思います。  
<https://www.youtube.com/watch?v=xXNOkIuSYuA>

[code]

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatefulWidget {
      MyAppState createState() => MyAppState();
    }
    
    class MyAppState extends State<MyApp> {
      bool dark = false;
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: dark ? ThemeData.dark() : ThemeData.light(),
          home: Builder(
            builder: (context) {
              return Scaffold(
                  appBar: AppBar(title: Text('Toggle theme sample')),
                  body: ListView(
                    padding: const EdgeInsets.all(8),
                    children: <Widget>[
                      SwitchListTile(
                        value: dark,
                        title: const Text('DarkTheme'),
                        onChanged: (bool v) => setState(() => dark = v),
                      ),
                      Row(children: [
                        Text('primaryColor'),
                        Container(
                            width: 20,
                            height: 20,
                            color: Theme.of(context).primaryColor)
                      ]),
                      Row(children: [
                        Text('accentColor'),
                        Container(
                            width: 20,
                            height: 20,
                            color: Theme.of(context).backgroundColor)
                      ]),
                    ],
                  ));
            },
          ),
        );
      }
    }
    
[/code]


CC BY-SA 4.0
2020-05-12T06:13:14.573
66531
2020-05-12T06:13:14.573
40046
65753
answer