Views
What is the equivalent of a View in Flutter?
How is react-style, or declarative, programming different than the traditional imperative style? For a comparison, see Introduction to declarative UI.
In Android, the View
is the foundation of everything that shows up on the screen. Buttons, toolbars, and inputs, everything is a View. In Flutter, the rough equivalent to a View
is a Widget
. Widgets don’t map exactly to Android views, but while you’re getting acquainted with how Flutter works you can think of them as “the way you declare and construct UI”.
However, these have a few differences to a View
. To start, widgets have a different lifespan: they are immutable and only exist until they need to be changed. Whenever widgets or their state change, Flutter’s framework creates a new tree of widget instances. In comparison, an Android view is drawn once and does not redraw until invalidate
is called.
Flutter’s widgets are lightweight, in part due to their immutability. Because they aren’t views themselves, and aren’t directly drawing anything, but rather are a description of the UI and its semantics that get “inflated” into actual view objects under the hood.
Flutter includes the Material Components library. These are widgets that implement the Material Design guidelines. Material Design is a flexible design system optimized for all platforms, including iOS.
But Flutter is flexible and expressive enough to implement any design language. For example, on iOS, you can use the Cupertino widgets to produce an interface that looks like Apple’s iOS design language.
How do I update widgets?
In Android, you update your views by directly mutating them. However, in Flutter, Widget
s are immutable and are not updated directly, instead you have to work with the widget’s state.
This is where the concept of Stateful and Stateless widgets comes from. A StatelessWidget
is just what it sounds like—a widget with no state information.
StatelessWidgets
are useful when the part of the user interface you are describing does not depend on anything other than the configuration information in the object.
For example, in Android, this is similar to placing an ImageView
with your logo. The logo is not going to change during runtime, so use a StatelessWidget
in Flutter.
If you want to dynamically change the UI based on data received after making an HTTP call or user interaction then you have to work with StatefulWidget
and tell the Flutter framework that the widget’s State
has been updated so it can update that widget.
The important thing to note here is at the core both stateless and stateful widgets behave the same. They rebuild every frame, the difference is the StatefulWidget
has a State
object that stores state data across frames and restores it.
If you are in doubt, then always remember this rule: if a widget changes (because of user interactions, for example) it’s stateful. However, if a widget reacts to change, the containing parent widget can still be stateless if it doesn’t itself react to change.
The following example shows how to use a StatelessWidget
. A common StatelessWidget
is the Text
widget. If you look at the implementation of the Text
widget you’ll find that it subclasses StatelessWidget
.
Text(
'I like Flutter!',
style: TextStyle(fontWeight: FontWeight.bold),
);
As you can see, the Text
Widget has no state information associated with it, it renders what is passed in its constructors and nothing more.
But, what if you want to make “I Like Flutter” change dynamically, for example when clicking a FloatingActionButton
?
To achieve this, wrap the Text
widget in a StatefulWidget
and update it when the user clicks the button.
For example:
import 'package:flutter/material.dart';
void main() {
runApp(SampleApp());
}
class SampleApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SampleAppPage(),
);
}
}
class SampleAppPage extends StatefulWidget {
SampleAppPage({Key key}) : super(key: key);
@override
_SampleAppPageState createState() => _SampleAppPageState();
}
class _SampleAppPageState extends State<SampleAppPage> {
// Default placeholder text
String textToShow = "I Like Flutter";
void _updateText() {
setState(() {
// update the text
textToShow = "Flutter is Awesome!";
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: Center(child: Text(textToShow)),
floatingActionButton: FloatingActionButton(
onPressed: _updateText,
tooltip: 'Update Text',
child: Icon(Icons.update),
),
);
}
}
How do I lay out my widgets? Where is my XML layout file?
In Android, you write layouts in XML, but in Flutter you write your layouts with a widget tree.
The following example shows how to display a simple widget with padding:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: Center(
child: MaterialButton(
onPressed: () {},
child: Text('Hello'),
padding: EdgeInsets.only(left: 10.0, right: 10.0),
),
),
);
}
You can view the layouts that Flutter has to offer in the widget catalog.
How do I add or remove a component from my layout?
In Android, you call addChild()
or removeChild()
on a parent to dynamically add or remove child views. In Flutter, because widgets are immutable there is no direct equivalent to addChild()
. Instead, you can pass a function to the parent that returns a widget, and control that child’s creation with a boolean flag.
For example, here is how you can toggle between two widgets when you click on a FloatingActionButton
:
import 'package:flutter/material.dart';
void main() {
runApp(SampleApp());
}
class SampleApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SampleAppPage(),
);
}
}
class SampleAppPage extends StatefulWidget {
SampleAppPage({Key key}) : super(key: key);
@override
_SampleAppPageState createState() => _SampleAppPageState();
}
class _SampleAppPageState extends State<SampleAppPage> {
// Default value for toggle
bool toggle = true;
void _toggle() {
setState(() {
toggle = !toggle;
});
}
_getToggleChild() {
if (toggle) {
return Text('Toggle One');
} else {
return MaterialButton(onPressed: () {}, child: Text('Toggle Two'));
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: Center(
child: _getToggleChild(),
),
floatingActionButton: FloatingActionButton(
onPressed: _toggle,
tooltip: 'Update Text',
child: Icon(Icons.update),
),
);
}
}
How do I animate a widget?
In Android, you either create animations using XML, or call the animate()
method on a view. In Flutter, animate widgets using the animation library by wrapping widgets inside an animated widget.
In Flutter, use an AnimationController
which is an Animation<double>
that can pause, seek, stop and reverse the animation. It requires a Ticker
that signals when vsync happens, and produces a linear interpolation between 0 and 1 on each frame while it’s running. You then create one or more Animation
s and attach them to the controller.
For example, you might use CurvedAnimation
to implement an animation along an interpolated curve. In this sense, the controller is the “master” source of the animation progress and the CurvedAnimation
computes the curve that replaces the controller’s default linear motion. Like widgets, animations in Flutter work with composition.
When building the widget tree you assign the Animation
to an animated property of a widget, such as the opacity of a FadeTransition
, and tell the controller to start the animation.
The following example shows how to write a FadeTransition
that fades the widget into a logo when you press the FloatingActionButton
:
import 'package:flutter/material.dart';
void main() {
runApp(FadeAppTest());
}
class FadeAppTest extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fade Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyFadeTest(title: 'Fade Demo'),
);
}
}
class MyFadeTest extends StatefulWidget {
MyFadeTest({Key key, this.title}) : super(key: key);
final String title;
@override
_MyFadeTest createState() => _MyFadeTest();
}
class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
AnimationController controller;
CurvedAnimation curve;
@override
void initState() {
super.initState();
controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
child: FadeTransition(
opacity: curve,
child: FlutterLogo(
size: 100.0,
)))),
floatingActionButton: FloatingActionButton(
tooltip: 'Fade',
child: Icon(Icons.brush),
onPressed: () {
controller.forward();
},
),
);
}
}
For more information, see Animation & Motion widgets, the Animations tutorial, and the Animations overview.
How do I use a Canvas to draw/paint?
In Android, you would use the Canvas
and Drawable
s to draw images and shapes to the screen. Flutter has a similar Canvas
API as well, since it is based on the same low-level rendering engine, Skia. As a result, painting to a canvas in Flutter is a very familiar task for Android developers.
Flutter has two classes that help you draw to the canvas: CustomPaint
and CustomPainter
, the latter of which implements your algorithm to draw to the canvas.
To learn how to implement a signature painter in Flutter, see Collin’s answer on Custom Paint.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: DemoApp()));
class DemoApp extends StatelessWidget {
Widget build(BuildContext context) => Scaffold(body: Signature());
}
class Signature extends StatefulWidget {
SignatureState createState() => SignatureState();
}
class SignatureState extends State<Signature> {
List<Offset> _points = <Offset>[];
Widget build(BuildContext context) {
return GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
setState(() {
RenderBox referenceBox = context.findRenderObject();
Offset localPosition =
referenceBox.globalToLocal(details.globalPosition);
_points = List.from(_points)..add(localPosition);
});
},
onPanEnd: (DragEndDetails details) => _points.add(null),
child: CustomPaint(painter: SignaturePainter(_points), size: Size.infinite),
);
}
}
class SignaturePainter extends CustomPainter {
SignaturePainter(this.points);
final List<Offset> points;
void paint(Canvas canvas, Size size) {
var paint = Paint()
..color = Colors.black
..strokeCap = StrokeCap.round
..strokeWidth = 5.0;
for (int i = 0; i < points.length - 1; i++) {
if (points[i] != null && points[i + 1] != null)
canvas.drawLine(points[i], points[i + 1], paint);
}
}
bool shouldRepaint(SignaturePainter other) => other.points != points;
}
How do I build custom widgets?
In Android, you typically subclass View
, or use a pre-existing view, to override and implement methods that achieve the desired behavior.
In Flutter, build a custom widget by composing smaller widgets (instead of extending them). It is somewhat similar to implementing a custom ViewGroup
in Android, where all the building blocks are already existing, but you provide a different behavior—for example, custom layout logic.
For example, how do you build a CustomButton
that takes a label in the constructor? Create a CustomButton that composes a RaisedButton
with a label, rather than by extending RaisedButton
:
class CustomButton extends StatelessWidget {
final String label;
CustomButton(this.label);
@override
Widget build(BuildContext context) {
return RaisedButton(onPressed: () {}, child: Text(label));
}
}
Then use CustomButton
, just as you’d use any other Flutter widget:
@override
Widget build(BuildContext context) {
return Center(
child: CustomButton("Hello"),
);
}