App customisation helps to build an awesome user experience, what we want in all our apps. Letting users change colours and styles to whatever they prefer. Even if you don’t build many funky themes for your app, a dark theme is almost a must-have. With many big named applications implementing dark theme and some even rolling out their applications with a dark theme as default.

Read here on why it is important to have a dark mode option¹

This tutorial will be creating a simple one-page Flutter application where the user can select predefined themes or choose their colours for their very own custom theme.

Let ‘s get this show on the road

1. Firstly, go ahead and create a new Flutter project and add the latest version of the [provider](https://pub.dev/packages/provider) package to the dependencies in the pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  provider: ^4.1.3

2. Next, write our predefined theme values. Create a new dart file and name it theme_values.dart.

To keep things simple for now, we will be creating [ThemeData](https://api.flutter.dev/flutter/material/ThemeData-class.html) with just the primaryColor, accentColor and backgroundColor defined. See the [ThemeData](https://api.flutter.dev/flutter/material/ThemeData-class.html) documentation to see what else you can configure.

This example contains 4 different predefined themes.

#dart #flutter #flutter-ui