Question

??

有谁知道如何将这两个深色/浅色主题“flatbutton”转换为一个“raisedbutton”来切换深色和浅色主题？

深色/浅色主题代码：

                  child: FlatButton(
                    onPressed: () {
                      Magazin.of(context).setBrightness(Brightness.dark);
                    },
                    child: Text('DARK MODE', style: TextStyle(color: isDark ? Colors.black : Colors.white, fontFamily: "SampleFont", fontSize: 13.0)),
                  ),


                  child: FlatButton(
                    onPressed: () {
                      Magazin.of(context).setBrightness(Brightness.light);
                    },

                    child: Text('LIGHT MODE', style: TextStyle(color: isDark ? Colors.black : Colors.white, fontFamily: "SampleFont", fontSize: 13.0)),

凸起按钮示例代码：

( Flutter - How to convert "Switch" to "raised button" ( Push-Notifications )? )

bool _enabled = false;

// [...]

RaisedButton(
      color: _enabled ? Colors.green : Colors.red,
      onPressed: () {
        setState(() {

        });
      },
      child: Text(_enabled? "On" : "Off")),

附上一个当然不起作用的代码，但应该代表我想要的，以便更容易理解..

RaisedButton(
      color: _light ? Colors.white : Colors.black,
      onPressed: () {
        setState(() {
           Magazin.of(context).setBrightness(Brightness.light);
           Magazin.of(context).setBrightness(Brightness.dark);
        });
      },
      child: Text(_light? "LIGHT THEME" : "DARK THEME")),
                            style: TextStyle(
                              fontFamily: "SampleFont",
                              color: isDark ? Colors.green : Colors.red,
                              fontSize: 35.0,

Answer 1

您可以在单独的函数中创建按钮，并且每次都从正确的函数中获取按钮：

class _ToggledButtonsState extends State<ToggledButtons> {
  bool _isDark = false;

  FlatButton _getDarkButton() => FlatButton(
        onPressed: () {
          setState(() {
            _isDark = false;
          });
        },
        child: Text(
          'DARK MODE',
          style: TextStyle(color: Colors.black),
        ),
      );

  RaisedButton _getLightButton() => RaisedButton(
        onPressed: () {
          setState(() {
            _isDark = true;
          });
        },
        child: Text(
          'LIGHT MODE',
          style: TextStyle(color: Colors.white),
        ),
      );

  @override
  Widget build(BuildContext context) {
    return Container(
      child: _isDark ? _getDarkButton() : _getLightButton(),
    );
  }
}

Answer 2

实现这一点的最简单方法是您可以使用凸起按钮的高度属性使其成为平面按钮。

child: RaisedButton(
                    onPressed: () {
                      isDark?Magazin.of(context).setBrightness(Brightness.light):Magazin.of(context).setBrightness(Brightness.dark);
                    },
                    elevation:isDark?0:2,//it will make it flat button for dark if you want it for light then replace 0 and 2
                    child: Text(isDark?'DARK MODE':'LIGHT MODE', style: TextStyle(color: isDark ? Colors.black : Colors.white, fontFamily: "SampleFont", fontSize: 13.0)),
                  ),

Answer 3

最合适的方法之一如下：

abstract class MyTheme{
  Color get bgColor;
  Color get fontColor;
}

class MyLightTheme extends MyTheme{
  @override
  Color get bgColor = Colors.white;

  @override
  Color get fontColor = Colors.black;
}

class MyDarkTheme extends MyTheme{
  @override
  Color get bgColor = Colors.black;

  @override
  Color get fontColor = Colors.white;
}

ThemeService 类：

// I use this with Provider. It is very helpful.
class ThemeService with ChangeNotifier{
  bool _theme;

  bool get theme => _theme;

  MyTheme _myTheme = MyLightTheme();

  MyTheme get myTheme => _myTheme;

  ThemeService.initialize() {
    init();
  }

  void setThemeClass(bool l) {
    _myTheme = MyLightTheme();
    if (l == false) _myTheme = MyLightTheme();
    else if (l == true) _myTheme = MyDarkTheme();
    notifyListeners();
  }

  Future<void> init() async {
    SharedPreferences _prefs = await SharedPreferences.getInstance();
    _theme = (_prefs.getBool("Theme") ?? false);
    setThemeClass(_theme);
    notifyListeners();
  }

  void setTheme(bool l){
    setMyTheme(l);
  }

  Future<void> setMyTheme(bool l) async {
    SharedPreferences _prefs = await SharedPreferences.getInstance();
    bool done = await _prefs.setBool("Theme", l);
    if (done) {
      _theme = l;
    }
    setThemeClass(_theme);
    notifyListeners();
  }
}

main.dart 文件中的提供者代码：

MultiProvider(
  providers: [
    ChangeNotifierProvider<ThemeService>.value(
      value: ThemeService.initialize(),
    ),
  ],
  child: MyChild(),
}

现在，我可以通过以下方式访问该类：

ThemeService _themeService = Provider.of<ThemeService>(context);
// Now, for background color, I'll just use the following:
_themeService.bgColor;
// Above code will give me the background color based on the currently selected theme.

开关代码：

ThemeService _themeService = Provider.of<ThemeService>(context);

Switch(  
  onChanged: setTheme,
  value: _themeService.theme,
)

Flutter - 如何将“FlatButton”转换为“RaisedButton”（切换深色/浅色主题）？ + 文字样式

3 个答案: