This is a series of Flutter tips, tricks, and snippets that you might find useful. We will start with basics, and then move on to advanced concepts. We will build an application along the way. I will not cover the setup and new project creation since the online documentation is quite detailed. Let’s start.
When you create a new flutter project, you should see 3 important folders.
lib:
This contains all your flutter code. main.dart
is created by default and is the entry point of your application.
android:
This contains the Android project.
ios:
This contains the iOS project.
Now when you run the project, you will see a single page with a number (counter) at
Notice that both Android and iOS applications are running from the same codebase. But, the toolbars for both the platforms are different and follow platform specific guidelines.
Let’s change the theme
In the main.dart
file, you can this code:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, // Colors.deepOrange
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
The primarySwatch
parameter sets the primary colour of the application. Let’s try to change it and see the output.
Change application name
By default, the application name for both Android and iOS is set as the project name. In most cases, you will need to change them. To do this, you have to go into the corresponding projects.
For Android: Change the <application> tag’s android
For iOS: You need to set the value of the <key>CFBundleName</key> in the Info.plist file.
Changing the application icon
Application icon for Android and iOS follow different guidelines. When you create a flutter application, sample app icons are generated for both Android and iOS projects. You will need to replace all these pre-generated images for Android and iOS separately.
Changing the package name or the bundle identifier
This configuration also needs to be done separately on the Android and the iOS projects.
In the next posts, we will start developing an application from scratch. We will start off with a Login screen which would be our starting point of the application.
Next post: Flutter Playground – Part 2: Login Screen