Set Up Theme

Follow the steps to prepare theme of your flutter app. Here we are setting the app for dark and light mode

Prepare Theme

1. Add latest adaptive_theme (opens new window) package to pubspec.yaml

2. Add latest overlay_support (opens new window) package to pubspec.yaml

3. Click Pub get on Android Studio

4. Download theme folder from here (opens new window) and add it inside lib folder

5. In the theme folder you have downloaded the font used is inter for all theme elements. You can change this to the font you are planning to use for the app.

   • The changes can be made by changing baseTheme inside theme/light_theme/theme.dart and theme/dark_theme/theme.dart.
   • You can also change font for elements like app bar, button etc by changing variable common_font in files inside helpers folder of theme/light_theme/theme.dart and theme/dark_theme/theme.dart.

6. Make sure google_fonts package is added in pubspec.yaml and the font you are using is downloaded and added inside assets/google_fonts/ as shown here.

Test Theme

1. Replace main.dart with this code and change App Name to name of your app

import '../theme/test/test.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../theme/dark_theme/theme.dart';
import '../theme/light_theme/theme.dart';
import 'package:adaptive_theme/adaptive_theme.dart';
import 'package:overlay_support/overlay_support.dart';


void main() async {
  /// Initialize firebase app
  WidgetsFlutterBinding.ensureInitialized();

  /// Orientation
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  /// Initialize
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  /// Variables
  final String _title = "App Name";

  /// Init
  @override
  void initState() {
    _test();
    _checkAuth();
    super.initState();
  }

  /// Widget
  @override
  Widget build(BuildContext context) {
    return AdaptiveTheme(
      light: buildThemeData(),
      dark: buildDarkThemeData(),
      initial: AdaptiveThemeMode.light,
      builder: (theme, darkTheme) => OverlaySupport(
        global: true,
        child: MaterialApp(
          title: _title,
          theme: theme,
          darkTheme: darkTheme,
          debugShowCheckedModeBanner: false,
          home: const ThemeTest(),
        ),
      ),
    );
  }

  /// Test
  _test() async {}

  /// Check Auth
  _checkAuth() async {}
}