Question

如何保存已在flutter中指定的主题设置？

我在这里遇到问题。我很难在本地存储数据。我尝试了“ Flutter_Secure_Storage”，但我不知道如何使用它。本质上，我希望所选的主题保存在本地，并且在应用程序重新启动时可以再次使用该主题。我尝试使用sharedpreference，但无济于事。

在此之后，我将包括我的源代码和

     @override
    Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(38.0),
        child: AppBar(
          automaticallyImplyLeading: true,
          title: const Text('Theme'),
          leading: IconButton(
            icon: const Icon(Icons.arrow_back_ios),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ),
      ),
      body: new Container(
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //text
            new Container(
              padding: EdgeInsets.all(10.0),
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  new Container(
                    padding: EdgeInsets.only(top: 50, left: 10, right: 10),
                    child: new Column(
                      children: <Widget>[
                        //light theme
                        new Row(
                          children: <Widget>[
                            new Column(
                              children: <Widget>[
                                new Container(
                                    width: 120,
                                    height: 200,
                                    color: Color.fromRGBO(255, 127, 80, 5),
                                    child: new Icon(
                                      FontAwesomeIcons.cloudSun,
                                      color: Colors.yellowAccent,
                                      size: 50,
                                    )),
                                new Text(
                                  'Light',
                                  style: TextStyle(fontSize: 16),
                                ),
                                ButtonBar(
                                  alignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Radio(
                                      value: 1,
                                      groupValue: selectRadio,
                                      activeColor: Colors.blue,
                                      onChanged: (val) {
                                        //print('Radio $val');

                                        setState(() {
                                          setSelectedRadio(val);
                                          Provider.of<ThemeNotifier>(context).switchTheme();
                                        });
                                      },
                                    )
                                  ],
                                )
                              ],
                            )
                          ],
                        )
                      ],
                    ),
                  ),
                  new Container(
                    padding: EdgeInsets.only(top: 50, left: 10, right: 10),
                    child: new Column(
                      children: <Widget>[
                        //light theme
                        new Row(
                          children: <Widget>[
                            new Column(
                              children: <Widget>[
                                new Container(
                                    width: 120,
                                    height: 200,
                                    color: Color.fromRGBO(173, 216, 230, 5),
                                    child: new Icon(
                                      FontAwesomeIcons.cloudMoon,
                                      color: Color.fromRGBO(2, 22, 69, 5),
                                      size: 50,
                                    )),
                                new Text(
                                  'Dark',
                                  style: TextStyle(fontSize: 16),
                                ),
                                ButtonBar(
                                  alignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Radio(
                                      value: 2,
                                      groupValue: selectRadio,
                                      activeColor: Colors.blue,
                                      onChanged: (val) {
                                        //print('Radio $val');

                                        setState(() {
                                          setSelectedRadio(val);
                                          Provider.of<ThemeNotifier>(context).switchTheme();

                                        });
                                      },
                                    )
                                  ],
                                )
                              ],
                            )
                          ],
                        )
                      ],
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

Answer 1

您可以使用软件包https://pub.dev/packages/theme_provider
该软件包提供saveThemesOnChange和loadThemeOnInit

您还可以使用ThemeProvider.controllerOf(context).saveThemeToDisk();和ThemeProvider.controllerOf(context).loadThemeFromDisk();从磁盘上保存/加载主题

运行完整的示例代码，然后单击“下一步”主题按钮，然后重新启动此应用程序
您会看到它从黑暗主题开始

代码段

return ThemeProvider(
      saveThemesOnChange: true,
      loadThemeOnInit: true,
      themes: <AppTheme>[
        AppTheme.light(),
        AppTheme.dark(),
        customAppTheme(),
      ],
      child: MaterialApp(
        home: ThemeConsumer(
          child: HomePage(),
        ),
      ),
    );
  }

完整的示例代码

import 'package:flutter/material.dart';
import 'package:theme_provider/theme_provider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      saveThemesOnChange: true,
      loadThemeOnInit: true,
      themes: <AppTheme>[
        AppTheme.light(),
        AppTheme.dark(),
        customAppTheme(),
      ],
      child: MaterialApp(
        home: ThemeConsumer(
          child: HomePage(),
        ),
      ),
    );
  }
}

AppTheme customAppTheme() {
  return AppTheme(
    id: "custom_theme",
    description: "Custom Color Scheme",
    data: ThemeData(
      accentColor: Colors.yellow,
      primaryColor: Colors.red,
      scaffoldBackgroundColor: Colors.yellow[200],
      buttonColor: Colors.amber,
      dialogBackgroundColor: Colors.yellow,
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Example App")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text("Next Theme"),
              onPressed: ThemeProvider.controllerOf(context).nextTheme,
            ),
            RaisedButton(
              child: Text("Theme Dialog"),
              onPressed: () {
                showDialog(
                    context: context,
                    builder: (_) => ThemeConsumer(child: ThemeDialog()));
              },
            ),
            RaisedButton(
              child: Text("Second Screen"),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (_) => ThemeConsumer(child: SecondPage()),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Next Theme"),
          onPressed: ThemeProvider.controllerOf(context).nextTheme,
        ),
      ),
    );
  }
}

演示

如何保存已在flutter中指定的主题设置？

1 个答案: