Flutter Themes

Byadmin

Any application’s user interface would be incomplete without themes. An application’s fonts and colors can be designed with the help of Flutter Themes, making it more presentable.

To apply a theme to an app in Flutter, use the theme widget. You may declare it in the program’s root to use it everywhere, or you can use it on specific parts of the app, like buttons and the navigation bar.

What is Flutter Themes?

The Flutter app’s widgets‘ appearance is controlled by a collection of theme-specific property-value pairs. You may find these properties in the ThemeData class. Let’s start by learning why ThemeData is important and how it facilitates theming.

Key Benefits of Using ThemeData

Keep the overall style consistent Flutter Themes. Create a single ThemeData object to hold all of the visual components of your app, including colors, fonts, shapes, and more. Make sure the brand identity is consistent and easy to recognize by applying this theme uniformly across all devices.

  • Make variants that fit various themes: Create different ThemeData objects for different user preferences, app areas, or light and dark modes.
  • Establish themes once, and apply them consistently: Use the right theme data in your program instead of manually configuring visual styles for individual widgets. Code duplication is minimized and maintenance is made easier in this way.
  • Updates and centralized control: Reducing the need for repetitive updates and maintaining consistency, changes made to the ThemeData object automatically propagate throughout your program.
  • Make accessible versions: Create unique ThemeData objects for those who require special accessibility features, including high-contrast themes for people who are visually impaired.

Properties of Flutter Themes

You can modify the default theme properties, including colors, fonts, and more, using the Flutter Theme widget to make your app look the way you want it to. The following is an overview of its properties:

  • Child: Under the Theme widget in the widget tree stands a necessary widget called child property. For this widget, the style is applied.
Theme(
data: ThemeData(
primaryColor: Colors.blue,
),
child: Scaffold(
appBar: AppBar(
title: Text('Themed AppBar'),
),
body: Center(
child: Text('Hello, Theme!'),
),
),
)

You can see that the AppBar and Text widgets are child of the Theme widget in this example Flutter Themes. The Scaffold widget is also a child of the Theme widget. This scaffold and all of its child are subject to the ThemeData specified in the data attribute.

  • Data: You can access the theme’s color scheme, font family, and other visual elements by passing an instance of the ThemeData class to the data property.
Theme(
data: ThemeData(
primaryColor: Colors.green,
textTheme: TextTheme(
bodyText1: TextStyle(color: Colors.green),
),
),
child: Scaffold(
appBar: AppBar(
title: Text('Green Themed AppBar'),
),
body: Center(
child: Text('This text is green!'),
),
),
)

In this example, the ThemeData changes the bodyText1 text style to green and sets the main color to green. That style will be sent down to the Text widget inside the Scaffold body.

isMaterialAppTheme

The isMaterialApp Flutter Themes is a boolean value indicating if the theme should act as though it were supplied by the MaterialApp. In advanced situations when you wish to supersede the theme’s default behavior, this is helpful.

Example

MaterialApp(
theme: ThemeData(
primaryColor: Colors.red,
),
home: Theme(
data: ThemeData(
primaryColor: Colors.yellow,
),
isMaterialAppTheme: true,
child: Scaffold(
appBar: AppBar(
title: Text('Yellow Themed AppBar'),
),
body: Center(
child: Text('This app bar is yellow, despite the MaterialApp theme being red.'),
),
),
),
)

The main color theme of the MaterialApp in this example is red. A yellow main color and the isMaterialAppTheme property set to true characterize the Theme widget inside the MaterialApp home property, though. Instead of seeing the red MaterialApp theme, you’ll see a yellow AppBar since the theme inside the Theme widget took precedence.

Create a complete Flutter theme

Using Flutter’s ThemeData class, you may specify your theme. Colors, text styles, and button styles are just a few of the UI elements that may be modified with this class.

Example of basic Flutter Themes

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Theme Demo',
theme: ThemeData(
primarySwatch: Colors.blue, // Primary color for the app
accentColor: Colors.orange, // Accent color for widgets
backgroundColor: Colors.grey[200], // Background color
textTheme: TextTheme(
headline1: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold, color: Colors.black),
bodyText1: TextStyle(fontSize: 16.0, color: Colors.black87),
),
buttonTheme: ButtonThemeData(
buttonColor: Colors.blue, // Button background color
textTheme: ButtonTextTheme.primary, // Button text color
),
appBarTheme: AppBarTheme(
color: Colors.blue, // AppBar background color
elevation: 4.0, // AppBar elevation
textTheme: TextTheme(
headline6: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.white),
),
),
),
home: HomeScreen(),
);
}
}

class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Welcome to Flutter!',
style: Theme.of(context).textTheme.headline1,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {},
child: Text('Press Me'),
),
],
),
),
);
}
}

Customizing the Theme

The Flutter Themes in the above example is quite basic, but you may make it your own by adding specifics. I’ll show you how to make it longer:

theme: ThemeData(
primarySwatch: Colors.deepPurple,
accentColor: Colors.amber,
backgroundColor: Colors.white,
fontFamily: 'Roboto',
textTheme: TextTheme(
headline1: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold, color: Colors.deepPurple),
bodyText1: TextStyle(fontSize: 18.0, color: Colors.grey[800]),
button: TextStyle(fontSize: 18.0, color: Colors.white),
),
buttonTheme: ButtonThemeData(
buttonColor: Colors.deepPurple,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
textTheme: ButtonTextTheme.primary,
),
appBarTheme: AppBarTheme(
color: Colors.deepPurple,
elevation: 6.0,
textTheme: TextTheme(
headline6: TextStyle(fontSize: 22.0, fontWeight: FontWeight.w600, color: Colors.white),
),
iconTheme: IconThemeData(color: Colors.white),
),
cardTheme: CardTheme(
color: Colors.white,
shadowColor: Colors.grey.withOpacity(0.5),
elevation: 5,
margin: EdgeInsets.all(10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.deepPurple),
),
labelStyle: TextStyle(color: Colors.deepPurple),
),
),

Applying the Flutter Themes

Your app will automatically use the theme you define in ThemeData. If necessary, you can also modify theme properties within individual widgets.

Running the app

Launching the app will allow you to observe the Flutter Themes in operation. This theme will make it easier to maintain and update your app by ensuring consistent styling across all of its components.

Similar Posts