Now Days Dark themes are everywhere then why not in your flutter app π€
Let's do it -
We are going to implement dark theme in a simple flutter app using darkTheme
property of MaterialApp
.
Index -
- Initial UI Setup
- Define Dark and Light themes
- Use these themes in MaterialApp
- Final Code
Initial UI Setup
Create a simple flutter app with the following code or you can create your own ui.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
TextStyle _style = TextStyle(fontSize: 55);
bool _isDark = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Theme',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Theme Demo'),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Row(
children: [
Text('Happy', style: _style),
],
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('New', style: _style),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('Year', style: _style),
],
),
Text('2021',
style: _style.copyWith(
color: Colors.deepOrange,
fontWeight: FontWeight.bold,
)),
Padding(
padding: const EdgeInsets.only(top: 80),
child: CupertinoSwitch(
value: _isDark,
onChanged: (v) {
setState(() {
_isDark = !_isDark;
});
},
),
),
Text('Dark'),
],
),
),
),
);
}
}
The above code displays Happy New Year 2021 on the screen with a switch to switch between light and dark themes.
Define Dark and Light themes
Create two ThemeData
one for light theme and another for dark theme.
Here you can define your own style of themes and colors.
ThemeData _light = ThemeData.light().copyWith(
primaryColor: Colors.green,
);
ThemeData _dark = ThemeData.dark().copyWith(
primaryColor: Colors.blueGrey,
);
In above code I have selected the primaryColor
green in light mode and blueGrey in dark mode.
Use these themes in MaterialApp
In your MaterialApp
widget add the following properties -
darkTheme: _dark,
theme: _light,
themeMode: _isDark ? ThemeMode.dark : ThemeMode.light,
Here we are switching our theme mode between light and dark based on the _isDark boolean
variable.
That's it, Now you can run your app and play with light and dark themes.
Final Code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
TextStyle _style = TextStyle(fontSize: 55);
bool _isDark = false;
ThemeData _light = ThemeData.light().copyWith(
primaryColor: Colors.green,
);
ThemeData _dark = ThemeData.dark().copyWith(
primaryColor: Colors.blueGrey,
);
@override
Widget build(BuildContext context) {
return MaterialApp(
darkTheme: _dark,
theme: _light,
themeMode: _isDark ? ThemeMode.dark : ThemeMode.light,
debugShowCheckedModeBanner: false,
title: 'Flutter Theme',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Theme Demo'),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Row(
children: [
Text('Happy', style: _style),
],
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('New', style: _style),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('Year', style: _style),
],
),
Text('2021',
style: _style.copyWith(
color: Colors.deepOrange,
fontWeight: FontWeight.bold,
)),
Padding(
padding: const EdgeInsets.only(top: 80),
child: CupertinoSwitch(
value: _isDark,
onChanged: (v) {
setState(() {
_isDark = !_isDark;
});
},
),
),
Text('Dark'),
],
),
),
),
);
}
}
This is my first post on the Dev Community. If you have suggestion or any problem in my post comment down, I will try to resolve it as soon as possible.
Top comments (1)
Its so coool, keep it Up.