Using separate themes for Android and iOS in Flutter

compodoc

In this I am going to show you how to use two separate themes for Both Android and iOS apps in Flutter. Like we can go with Material color in Android app and go with some light colors in iOS or vice versa as we wish depends upon the individual choice.

How to do that?

We need to implement this in the main.dart file. First see the code then I will explain it in details

First you need to import foundation.dart from flutter package to achieve this.

import 'package:flutter/foundation.dart';

see the full code here.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:kisan/my_home_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

final ThemeData kIOSTheme = new ThemeData(
  primarySwatch: Colors.orange,
  primaryColor: Colors.grey[100],
  primaryColorBrightness: Brightness.light,
);

final ThemeData kDefaultTheme = new ThemeData(
  primarySwatch: Colors.purple,
  primaryColor: Colors.black,
  accentColor: Colors.black,
  brightness: Brightness.light,
);



void main() {
  initFirestoreSettings();
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.white, //top bar color
      statusBarIconBrightness: Brightness.dark, //top bar icons
      systemNavigationBarColor: Colors.white, //bottom bar color
      systemNavigationBarIconBrightness: Brightness.dark, //bottom bar icons
    )
  );
  SystemChrome.setPreferredOrientations(
          [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
      .then((_) => runApp(new MyApp()));
}

void initFirestoreSettings() async {
  Firestore firestore = Firestore();
  await firestore.settings(timestampsInSnapshotsEnabled: true);
}



class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kisan',
      debugShowCheckedModeBanner: false,
       theme: defaultTargetPlatform == TargetPlatform.iOS
          ? kIOSTheme
          : kDefaultTheme,
      home: MyHomePage(title: 'Welcome Kisan'),
    );
  }
}

First I create two theme one is kIOSTheme and kDefaultTheme. After that I check programtically on which platform app is currently running and decide accordingly. The code below is responsilbe for make it possible (inside build method)

 theme: defaultTargetPlatform == TargetPlatform.iOS
          ? kIOSTheme
          : kDefaultTheme,

Hope you have enjoyed the topic I will come up with these kind of small handy scripts to make development easy for you. Thanks.


Tagged with:
CodeNextGen
Written by Sanjeev Kumar

Get notifications about new posts on Twitter, RSS or Email.