Views
What is the equivalent of the View
container?
In React Native, View
is a container that supports layout with Flexbox
, style, touch handling, and accessibility controls.
In Flutter, you can use the core layout widgets in the Widgets library, such as Container, Column, Row, and Center.
For more information, see the Layout Widgets catalog.
What is the equivalent of FlatList
or SectionList
?
A List
is a scrollable list of components arranged vertically.
In React Native, FlatList
or SectionList
are used to render simple or sectioned lists.
// React Native
<FlatList
data={[ ... ]}
renderItem={({ item }) => <Text>{item.key}</Text>}
/>
ListView
is Flutter’s most commonly used scrolling widget. The default constructor takes an explicit list of children. ListView
is most appropriate for a small number of widgets. For a large or infinite list, use ListView.builder
, which builds its children on demand and only builds those children that are visible.
// Flutter
var data = [ ... ];
ListView.builder(
itemCount: data.length,
itemBuilder: (context, int index) {
return Text(
data[index],
);
},
)
Android |
IOS |
To learn how to implement an infinite scrolling list, see the Write Your First Flutter App, Part 1 codelab.
How do I use a Canvas to draw or paint?
In React Native, canvas components aren’t present so third party libraries like react-native-canvas
are used.
// React Native
handleCanvas = canvas => {
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'skyblue';
ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.fillRect(150, 100, 300, 300);
ctx.stroke();
};
render() {
return (
<View>
<Canvas ref={this.handleCanvas} />
</View>
);
}
In Flutter, you can use the CustomPaint
and CustomPainter
classes to draw to the canvas.
The following example shows how to draw during the paint phase using the CustomPaint
widget. It implements the abstract class, CustomPainter, and passes it to CustomPaint’s painter property. CustomPaint subclasses must implement the paint
and shouldRepaint
methods.
// Flutter
class MyCanvasPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.amber;
canvas.drawCircle(Offset(100.0, 200.0), 40.0, paint);
Paint paintRect = Paint();
paintRect.color = Colors.lightBlue;
Rect rect = Rect.fromPoints(Offset(150.0, 300.0), Offset(300.0, 400.0));
canvas.drawRect(rect, paintRect);
}
bool shouldRepaint(MyCanvasPainter oldDelegate) => false;
bool shouldRebuildSemantics(MyCanvasPainter oldDelegate) => false;
}
class _MyCanvasState extends State<MyCanvas> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomPaint(
painter: MyCanvasPainter(),
),
);
}
}
Android |
IOS |