0

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

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)
              ]),
            ],
          )),
    );
  }
}

screenrecord

1 件の回答 1

1

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

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)
                  ]),
                ],
              ));
        },
      ),
    );
  }
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。