锐客网

  1. 首页 > 睿知 > it技术 > >

Flutter实现多主题的六种方法

IT知识flutter方法

业无高卑志当坚，男儿有求安得闲？这篇文章主要讲述Flutter实现多主题的六种方法相关的知识，希望能为你提供帮助。
?
首先我们不用任何状态管理pckage?main.dart?

import package:flutter/material.dart;
import package:flutter_themes_demo/themes.dart;

void main()
runApp(MyApp());


class MyApp extends StatefulWidget
MyApp(Key key) : super(key: key);

@override
_MyAppState createState() => _MyAppState();


class _MyAppState extends State< MyApp>
@override
void initState()
super.initState();
currentTheme.addListener(()
setState(() );
);


@override
Widget build(BuildContext context)
return MaterialApp(
home: MyHomePage(title: Flutter Theme Demo),
title: Flutter Theme Demo,
theme: CustomTheme.lightTheme,
darkTheme: CustomTheme.darkTheme,
themeMode: currentTheme.currentTheme,
);



class MyHomePage extends StatefulWidget
MyHomePage(Key key, this.title) : super(key: key);
final String title;

@override
_MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State< MyHomePage>
@override
Widget build(BuildContext context)
final theme = Theme.of(context);

return Scaffold(
appBar: AppBar(
title: Text(
widget.title,
style: TextStyle(
color: theme.accentColor,
),
),
actions: [
IconButton(
icon: const Icon(Icons.brightness_4_rounded),
onPressed: ()
currentTheme.toggleTheme();
,
),
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: < Widget> [
Text(
Fluter Themes Demo,
),
],
),
),
);


?themes.dart?
import package:flutter/material.dart;

CustomTheme currentTheme = CustomTheme();

class CustomTheme with ChangeNotifier
static bool _isDarkTheme = false;
ThemeMode get currentTheme => _isDarkTheme ? ThemeMode.dark : ThemeMode.light;

void toggleTheme()
_isDarkTheme = !_isDarkTheme;
notifyListeners();


static ThemeData get lightTheme
return ThemeData(
primaryColor: Colors.lightBlue,
accentColor: Colors.white,
backgroundColor: Colors.white,
scaffoldBackgroundColor: Colors.white,
textTheme: TextTheme(
headline1: TextStyle(color: Colors.black),
headline2: TextStyle(color: Colors.black),
bodyText1: TextStyle(color: Colors.black),
bodyText2: TextStyle(color: Colors.black),
),
);


static ThemeData get darkTheme
return ThemeData(
primaryColor: Colors.black,
accentColor: Colors.red,
backgroundColor: Colors.grey,
scaffoldBackgroundColor: Colors.grey,
textTheme: TextTheme(
headline1: TextStyle(color: Colors.white),
headline2: TextStyle(color: Colors.white),
bodyText1: TextStyle(color: Colors.white),
bodyText2: TextStyle(color: Colors.white),
),
);


第二种方式 provider先看我们的代码结构



main.dart
import package:flutter/material.dart;
import package:flutter/services.dart;
import package:provider/provider.dart;
import package:theme_example/page/home_page.dart;
import package:theme_example/provider/theme_provider.dart;

Future main() async
WidgetsFlutterBinding.ensureInitialized();
await SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);

runApp(MyApp());


class MyApp extends StatelessWidget
static const String title = Light & Dark Theme;

@override
Widget build(BuildContext context) => ChangeNotifierProvider(
create: (context) => ThemeProvider(),
builder: (context, _)
final themeProvider = Provider.of< ThemeProvider> (context);

return MaterialApp(
title: title,
themeMode: themeProvider.themeMode,
theme: MyThemes.lightTheme,
darkTheme: MyThemes.darkTheme,
home: HomePage(),
);
,
);

provider文件夹?theme_provider.dart?
【Flutter实现多主题的六种方法】

import package:flutter/material.dart;
import package:flutter/scheduler.dart;

class ThemeProvider extends ChangeNotifier
ThemeMode themeMode = ThemeMode.system;

bool

    推荐阅读


    上一篇：Java反序列化漏洞——反射与反序列化基础

    下一篇：HarmonyOS - 手把手教你搭建Artifactory