Flutter - Introduction
Flutter is an app SDK for building high-performance, natively compiled UI apps for iOS && Android from a single Dart codebase.
I highly recommend checking out the technical overview and Write your first Flutter app codelab to better understand the basic underlying concepts behind Flutter.
If you're coming from another frontend platform check out those guides:
To learn more about Flutter's inner workings be sure to check out Inside Flutter documentation page.
For more general information and learning resources head to the official Flutter YouTube channel. Widget of the week and The Boring Flutter Development Show (deep dive, live coding) series are especially worth keeping an eye on.
Now that you can see some of the Flutter concepts better let's just jump right into it!
Widgets
Widgets are basic building blocks in Flutter. If you're coming from React you can think of Flutter widgets being like React components.
- Full index of Flutter built-in widgets
- Widget list grouped by category
- Widget of the week - excellent videos about purpose and usage of Flutter widgets
Stateless vs. stateful
In Flutter there are two types of widgets - stateless and stateful widgets.
Stateless widgets are simple and contain no internal state. They take parameters and return the widget tree from build
method.
class NameLabel extends StatelessWidget {
final String name;
NameLabel({Key key, this.name}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Text("Hello $name"),
);
}
}
Differently, stateful widgets do contain internal state.
They are defined by two classes - one representing widget and the other one representing the state. The reason for this is that widgets are immutable. Since StatefulWidget
extends Widget
it, therefore, must be immutable too. Splitting the declaration into two classes allows both StatefulWidget
to be immutable and State
to be mutable.\
Moreover, widgets are instantiated using the new MyWidget()
syntax. If we merged both classes into one, new MyWidget()
would reset all the properties of the state every time its parent update.
class Counter extends StatefulWidget {
Counter({Key key, this.name}) : super(key: key);
final String name;
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('${this.widget.name} have pushed the button this many times: $_counter'),
RaisedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
);
}
}
You can also see that
- the state can be modified only inside
setState
callback -
build
method exists only in the state class - you can think of UI as a function of the state - you can access widget parameters using
this.widget
reference
For a complete look at widgets in Flutter follow widgets intro page in the documentation.
Declarative UI
If you have never worked with a declarative UI framework like React or SwiftUI you may want to check out Introduction to declarative UI.
UI layouts
To learn about UI layouts in Flutter check out Layouts in Flutter documentation page and Layout basics codelab.
Flexbox
Flutter supports building layouts in Flexbox model.
Widgets inside a Flex
widget (eg. Column
, Row
) can be wrapped in the Flexible
widget. The Flexible
widget has flex property. Flutter has 3 flexible widgets: Flexible
, Expanded
and Spacer
.
Example - row of images:
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Image.asset('images/pic1.jpg'),
),
Expanded(
flex: 2,
child: Image.asset('images/pic2.jpg'),
),
Expanded(
child: Image.asset('images/pic3.jpg'),
),
],
);
Testing
Automated testing falls into a few categories:
- A unit test tests a single function, method, or class.
- A widget test (in other UI frameworks referred to as component test) tests a single widget.\ The goal of a widget test is to verify that the widget’s UI looks and interacts as expected.
- An integration test tests a complete app or a large part of an app.\ Generally, an integration test runs on a real device or an OS emulator.
For more information check out page about testing in Flutter documentation.
Common patterns
- Render widget conditionally in a list
return Column(
children: [
Text('foo'),
if (isBar) Text('bar'),
Text('baz'),
],
);
Flutter developer experience
IDE integrations
Flutter team officially supports two coding environments for Flutter - IntelliJ/Android Studio and Visual Studio Code. Read the Flutter documentation on how to setup IntelliJ integration and Visual Studio Code integration.
Useful VSCode settings
"dart.previewFlutterUiGuides"
Setting this value totrue
will render guides showing you how widgets are nested:
"dart.debugExternalLibraries"
,"dart.debugSdkLibraries"
Setting these values to false
will disable stepping into external libraries and SDK while debugging.
Of course, as I mentioned Flutter is based on Dart programming language and it's better for you to at least become familiar with coding in Dart. I'll share another article specifically about some of the basics of this programming language in the future section. For know I'd like to thank you all for spending time reading this post.
What're your thoughts about Flutter? I encourage you to let me know what you're thinking wheater Flutter is new to you or you have already some experience with it. Share your opinion in the comments section below 🔥
Top comments (0)