Vertical Scroll View With Example With Flutter Android

admin_img Posted By Bajarangi soft , Posted On 22-09-2020

To create a simple vertical ScrollView which can contain different type of widgets with different behavior we would use CustomScrollView widget. This widget can show multiple widgets inside it.

Vertical Scroll View in Flutter

Contents in this project create Vertical ScrollView with multiple child widgets using customScrollview Android iOS Example:

Create CustomScrollView widget in Safe Area widget. We are creating multiple container widget inside CustomScrollView
CustomScrollView(
  slivers: [
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 1.6,
      ),
      delegate: SliverChildBuilderDelegate(
            (context, index) => Container(
          margin: EdgeInsets.all(6.0),
          color: Colors.pink,
        ),
      ),
    )
  ],
)

Complete code in CustomScrollView widget
main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          centerTitle: true,
          title: Text('Vertical Gridview Design'),
          backgroundColor: Colors.black,
        ),
        body: CustomScrollView(
          slivers: [
            SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 1.6,
              ),
              delegate: SliverChildBuilderDelegate(
                    (context, index) => Container(
                  margin: EdgeInsets.all(6.0),
                  color: Colors.pink,
                ),
              ),
            )
          ],
        )
    );
  }
}

Related Post