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 it’s centre. There’s also a floating button which when clicked increases the value of count. Not a typical “hello world” application!

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:label parameter as you would do in a usual Android project.

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