Create a simple todolist Flutter application
Flutter is using Widgets to create the applications' UI. Widgets let you declare how and what to render on the screen.
Widgets can be composed to create more complex UI, creating a widgets tree, similar to the Document Object Model which is used to represent html pages.
For example a todo list app could be represented with the follownig wireframe:
From there we can start to have an idea of the widgets tree structure:
see also:
- Introduction to widgets: https://flutter.dev/docs/development/ui/widgets-intro
- Widget catalog: https://flutter.dev/docs/development/ui/widgets
- widget index: https://flutter.dev/docs/reference/widgets
- widget of the week on Youtube: https://www.youtube.com/watch?v=b_sQ9bMltGU&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG
You can create a new Flutter project with the following command line:
flutter create --org com.dwyl --project-name todolist .This will create the project todolist in the current folder ..
The --org flag uses the reverse domain name notation to identify your application.
You can then run the application with flutter run and run the tests with flutter test.
For the list of command type flutter help.
For more details about a specific command, for example create, run flutter create --help
Material Design is a guideline to create user interface.
Flutter implements the guideline with the material components widgets.
This list of widgest allow us to create rapdly a UI folling the best practices from material design.
To use these widgets you need first to import the material Dart package with import 'package:flutter/material.dart';
You can then browse all the material widgets and select the ones required for your application https://api.flutter.dev/flutter/material/material-library.html
You have also the possiblity to create an IOs look by using the Cupertino widgets package
Note that the Column and Exapanded widgets are "space" widgets.
Flutter provide a widget inspector where you can see the full tree of the application:
Dart requires a main function to be defined to create the start of your program.
void main() {
print('hello');
}the runApp function is used in the main function and takes a widget as parameter.
This widget becomes the root element of your application and it is displayed on the
user screen.
The MaterialApp widget create a material design application.
void main() {
runApp(MaterialApp(title: 'TodoList', home: App()));Note that the App widget is created later on as a StatelessWidget.
see also: