SliverGrid and SilverList in Flutter

SliverGrid and SilverList in Flutter :

This Flutter Tutorial post is single scroling.

Context

1) Flutter CustomScrollView
2) Flutter SliverToBoxAdapter
3) Flutter SliverGrid
4) Flutter SliverList
5) Flutter Sing Scroll Page

This Flutter Tutorial post use widget.
1) CustomScrollView
2) SliverToBoxAdapter
3) SliverGrid
4) SliverList

You can not direct call use must be SliverToBoxAdapter widget

_title(BuildContext context, String title) {<br>
    return  Container(<br>
        padding: EdgeInsets.only(left: 20.0, top: 20.0),<br>
        child: Text(title,<br>
            style: Theme.of(context)<br>
                .textTheme<br>
                .title<br>
                .merge(TextStyle(fontSize: 16.0, color: Colors.blue))),<br>
    );<br>
  }

Screenshot :

SliverGrid and SilverList in Flutter

main.dart

import 'package:flutter/material.dart';
import 'home.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

home.dart

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class HomePage extends StatelessWidget {
  final List<Map> subjectList = [
    {
      "create": "Flutter Tutorial",
      "topic": "Inheritance",
      "subject": "Java",
    },
    {
      "create": "Android Tutorial",
      "topic": "Life Cycle",
      "subject": "Android",
    },
    {
      "create": "Java Tutorial",
      "topic": "Collection Framework",
      "subject": "Java",
    }
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('SliverGrid and SliverList')),
      backgroundColor: Colors.white,
      body: CustomScrollView(
        slivers: <Widget>[
          _buildSlider(),
          _title(context, 'Sliver Grid in Flutter'),
          _buildPopularRestaurant(),
          _title(context, 'Sliver List in Flutter'),
          _buildRecommendedList()
        ],
      ),
    );
  }

  _title(BuildContext context, String title) {
    return SliverToBoxAdapter(
      child: Container(
        padding: EdgeInsets.only(left: 20.0, top: 20.0),
        child: Text(title,
            style: Theme.of(context)
                .textTheme
                .title
                .merge(TextStyle(fontSize: 16.0, color: Colors.blue))),
      ),
    );
  }

   _buildSlider() {
    return SliverToBoxAdapter(
      child: Stack(
        children: <Widget>[
          Container(
            height: 200,
            child: Swiper(
              itemCount: subjectList.length,
              autoplay: true,
              curve: Curves.easeIn,
              itemBuilder: (BuildContext context, int index){
                return Text(subjectList[index]["topic"],);
              },
            ),
          ),
          Container(
            height: 200,
            color: Colors.blue.withOpacity(0.5),
          ),
          Positioned(
            bottom: 20,
            left: 20,
            child: Text("Flutter Tutorial", style: TextStyle(
                color: Colors.white
            )),
          )
        ],
      ),
    );
  }

  _buildPopularRestaurant() {
    return SliverGrid(
      gridDelegate:
          SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        return Container(
          padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                  color: Colors.grey, height: 130.0, width: double.infinity),
              Text(subjectList[index]["topic"],
                  style: Theme.of(context)
                      .textTheme
                      .title
                      .merge(TextStyle(fontSize: 14.0)))
            ],
          ),
        );
      }, childCount: subjectList.length),
    );
  }

  _buildRecommendedList() {
    return SliverList(
      delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        return Container(
          padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                height: 150.0,
                color: Colors.black,
                width: double.infinity,
              ),
              SizedBox(height: 10.0),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(subjectList[index]["topic"]),
                        SizedBox(
                          height: 5.0,
                        ),
                        Text(subjectList[index]["create"],
                            style: Theme.of(context)
                                .textTheme
                                .subhead
                                .merge(TextStyle(fontSize: 12.0))),
                        SizedBox(
                          height: 5.0,
                        ),
                      ],
                    ),
                  ),
                  Text(subjectList[index]["subject"],
                      style: Theme.of(context).textTheme.title.merge(
                          TextStyle(fontSize: 16.0, color: Colors.black))),
                  IconButton(
                    icon: Icon(Icons.favorite_border),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(Icons.add_shopping_cart),
                    onPressed: () {},
                  )
                ],
              ),
            ],
          ),
        );
      }, childCount: subjectList.length),
    );
  }
}

pubspec.yaml

name: fluttertutorial
description: A new Flutter application.

version: 1.0.0+1

environment:
sdk: “>=2.1.0 <3.0.0”

dependencies:
flutter:
sdk: flutter

flutter_swiper:

dev_dependencies:
flutter_test:
sdk: flutter

flutter:
uses-material-design: true