flutter開(kāi)發(fā)實(shí)戰(zhàn)-Theme主題切換

之前做的應(yīng)用中有用到Theme主題切換，一直沒(méi)有整理，這里整理一下。
使用的是Android studio

一、效果圖

二、創(chuàng)建ThemeModel

// 提供五套可選主題色

const _themes = <MaterialColor>[
  Colors.blue,
  Colors.cyan,
  Colors.teal,
  Colors.green,
  Colors.red,
];

class Global {
  static late SharedPreferences _prefs;
  static Session session = Session();

  // 可選的主題列表
  static List<MaterialColor> get themes => _themes;

  // 是否為release版
  static bool get isRelease => bool.fromEnvironment("dart.vm.product");

  //初始化全局信息，會(huì)在APP啟動(dòng)時(shí)執(zhí)行
  static Future init() async {
    WidgetsFlutterBinding.ensureInitialized();
    _prefs = await SharedPreferences.getInstance();
    var _profile = _prefs.getString("session");
    if (_profile != null) {
      try {
        session = Session.fromJson(jsonDecode(_profile));
      } catch (e) {
        LoggerManager().debug("e：${e.toString()}");
      }
    } else {
      // 默認(rèn)主題索引為0，代表藍(lán)色
      session = Session()..theme = 0;
    }
  }

  // 持久化Profile信息
  static saveProfile() {
    _prefs.setString("session", jsonEncode(session.toJson()));
  }
}

class Session {
  int? _theme;
}

// 共享狀態(tài)
class SessionChangeNotifier with ChangeNotifier {
  Session get session => Global.session;

  String? get getToken => Global.session.token;

  @override
  void notifyListeners() {
    // 保存Profile變更
    Global.saveProfile();

    //通知依賴的Widget更新
    super.notifyListeners();
  }
}

class ThemeModel extends SessionChangeNotifier {
  // 獲取當(dāng)前主題，如果為設(shè)置主題，則默認(rèn)使用藍(lán)色主題
  MaterialColor get theme => Global.themes
      .firstWhere((e) => e.value == session.theme, orElse: () => Colors.blue);

  // 主題改變后，通知其依賴項(xiàng)，新主題會(huì)立即生效
  set theme(MaterialColor color) {
    if (color != theme) {
      session.theme = color[500]?.value;
      notifyListeners();
    }
  }
}

在Main.dart入口的MaterialApp

MaterialApp(
      theme: ThemeData(
        fontFamily: "PingFang SC",
        primarySwatch: themeModel.theme,
      ),
 ...

三、主題切換頁(yè)面

當(dāng)主題切換后，Provider會(huì)通知到對(duì)應(yīng)的頁(yè)面Build，就會(huì)顯示對(duì)應(yīng)的主題。

主題切換頁(yè)面

class ThemePage extends StatefulWidget {
  const ThemePage({Key? key, this.arguments}) : super(key: key);

  final Object? arguments;

  @override
  State<ThemePage> createState() => _ThemePageState();
}

class _ThemePageState extends State<ThemePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(
        onPressed: () {
          navigatorBack();
        },
        label: S.of(context).theme,
        isBackButton: true,
      ),
      body: ListView(
        //顯示主題色塊
        children: Global.themes.map<Widget>((e) {
          return GestureDetector(
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 16),
              child: Container(
                color: e,
                height: 40,
              ),
            ),
            onTap: () {
              //主題更新后，MaterialApp會(huì)重新build
              Provider.of<ThemeModel>(context, listen: false).theme = e;
            },
          );
        }).toList(),
      ),
    );
  }

  void navigatorBack() {
    NavigatorPageRouter.pop();
  }
}

四、小結(jié)

flutter開(kāi)發(fā)實(shí)戰(zhàn)-Theme主題切換，使用的是Android studio，使用Provider通知切換主題。

學(xué)習(xí)記錄，每天不停進(jìn)步。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-559008.html

到了這里，關(guān)于flutter開(kāi)發(fā)實(shí)戰(zhàn)-Theme主題切換的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！