08 Flutter/Dart - Intro
Install (Xcode and/or Android studio required)
macOS - intel
macOS - Apple Silicon (rosetta2 also needed)
Set up path variable
Fix all problems!
Either VS Code or Android Studio
- VS Code
- Install Flutter extension (Flutter v3.48.0)
- Android Studio
- Install Flutter and Dart plugin
Run again doctor from inside VS
View > Command Paletter > type doctor > Select Flutter: Run Flutter Doctor
FIX ALL THE ISSUES!!!!
First App - VS Code
- View > Command Palette.
- Flutter: New Project
- Give name and location
Let everything cool down, look for emulator connection on lower-right corner
- Select Debug palette, click on Cog wheel
- Create flutter debug configuration (or just press F5)
Run your app
- Debug > Start Debugging
- Or press F5
Wait for it!
- Try Hot Reload
- Change some strings in main.dart
- Save file
- Activate Dart Dev Tools when asked
Flutter - Dart
- Flutter apps are written using the Dart programming language, also originally from Google and now an ECMA standard.
- As a cross-platform framework, Flutter most closely resembles React Native, as Flutter allows for a reactive and declarative style of programming.
- Strongly typed, Single inheritance
- Implicit interfaces (every class is also an Interface)
Flutter - Widget
Everything is widget!
Images, icons, and text in a Flutter app are all widgets. Even layout elements such as the rows, columns, and grids that arrange, constrain, and align other widgets, are widgets themselves.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Flutter - Widgets
- Widgets describe what their view should look like given their current configuration and state.
- When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.
- Widgets are subclasses mostly of either StatelessWidget or StatefulWidget, depending on whether your widget manages any state.
- Main task is to implement a build() function, which describes the widget in terms of other, lower-level widgets.
- Lowest widget is RenderObjectWidget
- User interface does not depend on anything other than the configuration information in the object/widget itself and the BuildContext in which the widget is inflated
- Stateless widgets receive arguments from their parent widget, which they store in final member variables. When a widget is asked to build(), it uses these stored values to derive new arguments for the widgets it creates.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
- Widget constructors only use named arguments.
- Named arguments can be marked as required using “required”.
- The first argument is key, and the last argument is child, children, or the equivalent.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
- The Text widget lets you create a run of styled text within your application.
- Row, Column
- These flex widgets let you create flexible layouts in both the horizontal (Row) and vertical (Column) directions. The design of these objects is based on the web’s flexbox layout model.
- Instead of being linearly oriented (either horizontally or vertically), a Stack widget lets you place widgets on top of each other in paint order. You can then use the Positioned widget on children of a Stack to position them relative to the top, right, bottom, or left edge of the stack. Stacks are based on the web’s absolute positioning layout model.
- The Container widget lets you create a rectangular visual element. A container can be decorated with a BoxDecoration, such as a background, a border, or a shadow. A Container can also have margins, padding, and constraints applied to its size. In addition, a Container can be transformed in three-dimensional space using a matrix.
1 2 3 4 5 6 7 8 9 10 11