How does Flutter look like

Before jumping in to development, let's see what Flutter generated for us. Open generated devmeetings_flutter_app project in your IDE of choice.

Project structure

.dart source code is stored in the lib/ directory. android/, ios/ and test/ directories are there too, but we will not use those in this course.

App's entrypoint

lib/main.dart is the app entrypoint file.

Every Dart program starts at main() function, so let's see how it looks in our project.

void main() {

runApp(MyApp());

}

runApp function is imported from flutter/material.dart and it takes our root widget as a parameter to run the first render of our UI.

Generated code

Code generated by the flutter create is thoroughly documented, so I will not describe it in much detail.

tip

The important thing to know is that everything is a widget in Flutter. Thus, MyApp as special as it may seem, is just a widget like many others and does not have any special capabilities.

MyApp uses other widgets to build a hierarchy of UI elements.

note

We will be using flutter/material.dart widgets which matches Android theming today, but there are also iOS-like widgets available. Those widgets are stored in flutter/cupertino.dart, and can recreate native iOS feel in your app.