When using the flutter create
command to create a new Flutter app project, a counter app project is built by default. Instead of deleting the unwanted pieces of code every time I create a new project I wondered whether there was a way to start with a more simple, empty project. To begin, we will first create a simplified version of the Counter App project and from there change it into a generic "hello world" app.
First, let's have a look at the default Flutter project.
A default Flutter starter project
By default, the "flutter create" command generates the following counter app project:
If we look into /lib/main.dart
file, without the comments, it is over 70 lines long. It contains one Stateless and one Stateful widget.
A simpler version of the counter app using a --sample argument
To make a simpler counter app, we can use the "flutter create" command with the --sample parameter. It is based on a Scaffold widget sample. It will also have one Stateless and one Stateful widget and have the same functionality as a default Counter App.
We create it by using the following command:
And the resulting app will look like this:
The code contained within /lib/main.dart
file (excluding comments) will be around 40 lines long. The main difference with the default Counter App is less styling and more compact code.
But, what if we want to start with an even more basic, almost blank app Flutter project? When I start with a new project, I prefer to only have one Stateless widget and then build from there. Let's do that next.
A "hello world" starting project with no counter
We are going to use the same Scaffold widget sample from the previous section as a basis for an even simpler, practically empty project, which should be a good starting point for new projects. By stripping the counter functionality and replacing it with a single "hello world" Text widget, the end result would look like this:
The entire code for the main.dart
file is as follows:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello world project',
home: Scaffold(
appBar: AppBar(title: Text('Hello World App')),
body: const Center(child: Text('Hello world.')),
),
);
}
}
We are now down to less than 20 lines of code, each containing one Stateless widget using the Material and Scaffold widget. It's a good starting point, a general app on which we can build-up on. Making the project even simpler would probably not make much sense.
The skeleton template
The code above is suitable when creating projects from scratch. But, what if we needed a starting template with a more advanced and complete app structure? This is where the skeleton template comes in handy.
We create it using the flutter create --template=skeleton
command, but don't be fooled by the name. It is more advanced than the default counter app, but it is not a replacement for it. Check out this page for a more detailed look into the skeleton template.
Conclusion
By default, when you use the flutter create
command to create a new project in Flutter, it will generate a simple counter app. We can simplify this by creating a project that uses --sample=material.Scaffold.1 as an argument for a version of the same counter app, but with less styling. Finally, we created a boilerplate generic, practically empty Flutter app with only one Stateful widget that could be used as a starter project.