53Flutter provider、Getx、普通方式修改主题

最新推荐文章于 2025-10-17 04:49:46 发布

原创

最新推荐文章于 2025-10-17 04:49:46 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

Flutter -黑夜/白天模式

1.简介

黑夜/白天模式，在App中非常常见，那么如何通过Flutter来修改主题了

2.Theme

 theme: ThemeData(
          brightness:
              _isLight == true ? Brightness.light : Brightness.dark //判断 夜间/白天模式
          ),

————————通过控制ThemeData来实现主题的切换

代码

import 'package:flutter/material.dart';

import 'package:flutter/cupertino.dart';

import 'InWell.dart';

void main() {
  runApp(ThemeView());
}

class ThemeView extends StatefulWidget {
  ThemeView({Key key}) : super(key: key);

  @override
  _ThemeViewState createState() {
    return _ThemeViewState();
  }
}

class _ThemeViewState extends State<ThemeView> {
  bool _isLight = true; //判断是否是夜间模式 true白天 false夜间
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
          brightness:
              _isLight == true ? Brightness.light : Brightness.dark //判断 夜间/白天模式
          ),
      home: Scaffold(
          appBar: AppBar(title: Text("flutter theme")),
          body: Builder(
            builder: (context) => Center(
              child: Column(
                children: <Widget>[
                  OutlinedButton(
                      onPressed: () {
                        setState(() {
                          _isLight == true ? _isLight = false : _isLight = true;
                        });
                        Navigator.push(context, MaterialPageRoute(
                          builder: (BuildContext context) {
                            return InkWellPage();