In flutter there are 11 different type of widgets available to achieve scrolling functionality with different task. To create a simple vertical ScrollView which can contain different type of widgets with different behavior we would use SingleChildScrollView widget. This widget can show multiple widgets inside it. So in this tutorial we would create Vertical ScrollView with multiple child widgets using SingleChildScrollView widget in Android iOS app example.
Contents in this project create Vertical ScrollView with multiple child widgets using SingleChildScrollView Android iOS Example:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main widget class named as MyApp extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Scaffold widget -> Safe Area widget in widget build area.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: ) ) ); } } |
5. Create SingleChildScrollView widget in Safe Area widget. Now we would make a Column widget inside SingleChildScrollView and put all our multiple widgets inside Column widget. We are creating multiple container widget and image widgets inside SingleChildScrollView. The all will scroll easily here.
|
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 32 33 34 35 36 37 |
SingleChildScrollView( child: Column( children: <Widget>[ Container( color: Colors.green, // Yellow height: 120.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 200, fit: BoxFit.contain), Container( color: Colors.pink, // Yellow height: 120.0, ), Text('Some Sample Text - 1', style: TextStyle(fontSize: 28)), Text('Some Sample Text - 2', style: TextStyle(fontSize: 28)), Text('Some Sample Text - 3', style: TextStyle(fontSize: 28)), Container( color: Colors.redAccent, // Yellow height: 120.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), ], ), ), |
6. Complete source code for main.dart file:
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: SingleChildScrollView( child: Column( children: <Widget>[ Container( color: Colors.green, // Yellow height: 120.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 200, fit: BoxFit.contain), Container( color: Colors.pink, // Yellow height: 120.0, ), Text('Some Sample Text - 1', style: TextStyle(fontSize: 28)), Text('Some Sample Text - 2', style: TextStyle(fontSize: 28)), Text('Some Sample Text - 3', style: TextStyle(fontSize: 28)), Container( color: Colors.redAccent, // Yellow height: 120.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), ], ), ), ) ) ); } } |
Screenshots:
