flutter-tutorial

Flutter Themes

Themes are an important aspect of any application’s user interface. Themes are used to customise an application’s fonts and colours to make it more appealing. The Theme widget in Flutter is used to add themes to an application. It can be used for a specific area of the app, such as buttons and the navigation bar, or it can be defined in the app’s root to be used throughout the entire programme.

Theme Widget properties

  • child: The child property accepts a widget as the item to display in the widget tree behind the Theme widget.
  • data: This property accepts an object of the ThemeData class to provide the styling, colours, and typography to be utilised.
  • isMarerialAppTheme: The object for this attribute is a boolean (final). If true, the material design is used by the theme.

Creating a Container

In Flutter a simple container can be defined as below:

Container(
  color: Theme.of(context).accentColor,
  child: Text(
    'Hello LCZ!',
    style: Theme.of(context).textTheme.headline6,
  ),
);

Applying the Theme

To override the default theme of a widget in Flutter one can wrap the same widget inside the Theme widget. A Themedata() instance can be created and passed to the respective widget as shown below:

Theme(
  data: ThemeData(
    accentColor: Colors.yellow,
  ),
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

Example:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appName = 'Learn Code Zone';

    return MaterialApp(
      title: appName,
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.blue,
        accentColor: Colors.deepOrangeAccent,
        fontFamily: 'Georgia',

        //text styling
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
          headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
          bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
        ),
      ),
      home: MyHomePage(
        title: appName,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Container(
          color: Theme.of(context).accentColor,
          child: Text(
            'Hello Learners!',
            style: Theme.of(context).textTheme.headline6,
          ),
        ),
      ),
      floatingActionButton: Theme(
        data: Theme.of(context).copyWith(
          colorScheme:
              Theme.of(context).colorScheme.copyWith(secondary: Colors.red),
        ),
        child: FloatingActionButton(
          onPressed: null,
          child: Icon(Icons.arrow_circle_up),
        ),
      ),
    );
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *