Full Screen Scroll (List Using Generate) In Flutter

Full Screen Scroll (List Using Generate) In Flutter :

Full Screen Scroll Screenshot :

Full Screen Scroll (List Using Generate).dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Tutorial',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: Articles());
  }
}

class Articles extends StatefulWidget {
  @override
  createState() => _ArticlesState();
}

class _ArticlesState extends State<Articles> {
  ScrollController _controller;
  int page = 1;
  List<String> latestPost = new List();

  @override
  void initState() {
    super.initState();
    latestPost.add('1');
    latestPost.add('2');
    latestPost.add('3');
    latestPost.add('4');
    latestPost.add('5');
    latestPost.add('6');
    latestPost.add('7');
    latestPost.add('8');
    latestPost.add('9');
    latestPost.add('10');

    _controller =
        ScrollController(initialScrollOffset: 0.0, keepScrollOffset: true);
    _controller.addListener(_scrollListener);
  }

  _scrollListener() {
    var isEnd = _controller.offset >= _controller.position.maxScrollExtent &&
        !_controller.position.outOfRange;
    if (isEnd) {
      setState(() {
        page += 1;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title:
              Text('Full screen scroll', style: TextStyle(color: Colors.black)),
          elevation: 5,
          backgroundColor: Colors.white,
        ),
        body: Container(
            decoration: BoxDecoration(color: Colors.white70),
            child: SingleChildScrollView(
                controller: _controller,
                scrollDirection: Axis.vertical,
                child: Column(children: <Widget>[
                  //TODO FEATURE
                  SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Row(
                          children: latestPost.map((item) {
                        return InkWell(
                            onTap: () {},
                            child: ConstrainedBox(
                                constraints: new BoxConstraints(
                                    minHeight: 280.0,
                                    maxHeight: 290.0,
                                    minWidth: 360.0,
                                    maxWidth: 360.0),
                                child: Stack(children: <Widget>[
                                  Padding(
                                    padding: EdgeInsets.all(8),
                                    child: Container(
                                      height: 200,
                                      width: 400,
                                      child: Card(
                                        child: ClipRRect(
                                            borderRadius:
                                                new BorderRadius.circular(8.0),
                                            child: Container(
                                                color: Colors.grey
                                                    .withOpacity(0.1))),
                                        shape: RoundedRectangleBorder(
                                          borderRadius:
                                              BorderRadius.circular(10.0),
                                        ),
                                        elevation: 1,
                                        margin: EdgeInsets.all(10),
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                      left: 20,
                                      top: 80,
                                      right: 20,
                                      child: Container(
                                          alignment: Alignment.bottomRight,
                                          height: 200,
                                          child: Padding(
                                              padding: EdgeInsets.fromLTRB(
                                                  8, 8, 8, 8),
                                              child: Card(
                                                  child: Container(
                                                      padding:
                                                          EdgeInsets.fromLTRB(
                                                              8, 16, 8, 16),
                                                      child: Column(
                                                          mainAxisSize:
                                                              MainAxisSize.min,
                                                          children: <Widget>[
                                                            Container(
                                                              child: Text(
                                                                  'Content'),
                                                            ),
                                                            Container(
                                                                alignment:
                                                                    Alignment
                                                                        .topLeft,
                                                                child: Column(
                                                                    crossAxisAlignment:
                                                                        CrossAxisAlignment
                                                                            .start,
                                                                    mainAxisAlignment:
                                                                        MainAxisAlignment
                                                                            .center,
                                                                    children: <
                                                                        Widget>[
                                                                      Container(
                                                                          decoration: BoxDecoration(
                                                                              color: Color(
                                                                                  0xFFE3E3E3),
                                                                              borderRadius: BorderRadius.circular(
                                                                                  3)),
                                                                          padding: EdgeInsets.fromLTRB(
                                                                              8,
                                                                              4,
                                                                              8,
                                                                              4),
                                                                          margin: EdgeInsets.fromLTRB(
                                                                              0,
                                                                              0,
                                                                              0,
                                                                              8),
                                                                          child: Text(
                                                                              'Category',
                                                                              style: TextStyle(color: Colors.black, fontSize: 11, fontWeight: FontWeight.w400))),
                                                                      Container(
                                                                          padding: EdgeInsets.fromLTRB(
                                                                              4,
                                                                              8,
                                                                              4,
                                                                              8),
                                                                          child:
                                                                              Row(children: <Widget>[
                                                                            Icon(Icons.timer,
                                                                                color: Colors.black45,
                                                                                size: 12.0),
                                                                            SizedBox(width: 4),
                                                                            Text('Date',
                                                                                style: Theme.of(context).textTheme.caption)
                                                                          ]))
                                                                    ]))
                                                          ]))))))
                                ])));
                      }).toList())),

                  //TODO LATEST GridView
                  GridView.count(
                    padding: EdgeInsets.all(16),
                    shrinkWrap: true,
                    physics: ScrollPhysics(),
                    crossAxisCount: 3,
                    children: List.generate(latestPost.length, (index) {
                      var name = latestPost[index];
                      return Card(
                          child: InkWell(
                              onTap: () {},
                              child: Container(
                                  padding: EdgeInsets.fromLTRB(8, 16, 8, 8),
                                  child: Column(children: <Widget>[
                                    SizedBox(
                                        width: 100,
                                        height: 45,
                                        child: Icon(Icons.add)),
                                    Spacer(),
                                    Text('Title ' + name,
                                        textAlign: TextAlign.center,
                                        style: TextStyle(
                                            fontSize: 15,
                                            height: 1.2,
                                            fontWeight: FontWeight.w500))
                                  ]))));
                    }),
                  )
                ]))));
  }
}