Full Screen Scroll In Flutter

Full Screen Scroll In Flutter :

Functionality of Full Screen Scroll In Flutter:
1) Full Screen scroll
2) Row – Column using map with click
3) Pagination
4) SingleChildScrollView

Screenshot :

Full Screen Scroll  In Flutter

Full Screen Scroll.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;
        print('Scroll' + page.toString());
      });
    }
  }

  @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
                  Column(
                      children: latestPost.map((item) {
                    return InkWell(
                        onTap: () {},
                        child: ConstrainedBox(
                            constraints: new BoxConstraints(
                                minHeight: 160.0, maxHeight: 175.0),
                            child: Stack(children: <Widget>[
                              Container(
                                  alignment: Alignment.bottomRight,
                                  margin: EdgeInsets.fromLTRB(20, 16, 8, 0),
                                  child: Card(
                                      elevation: 6,
                                      child: Padding(
                                          padding:
                                              EdgeInsets.fromLTRB(110, 0, 0, 0),
                                          child: Column(children: <Widget>[
                                            Container(
                                                padding: EdgeInsets.fromLTRB(
                                                    8, 0, 4, 8),
                                                child: Column(
                                                    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)
                                                                        ]))
                                                              ]))
                                                    ]))
                                          ])))),
                              SizedBox(
                                  height: 170,
                                  width: 145,
                                  child: Card(
                                      child: ClipRRect(
                                          borderRadius:
                                              new BorderRadius.circular(8.0),
                                          child: Container(color: Colors.grey)),
                                      shape: RoundedRectangleBorder(
                                        borderRadius:
                                            BorderRadius.circular(10.0),
                                      ),
                                      elevation: 0,
                                      margin: EdgeInsets.all(10)))
                            ])));
                  }).toList()),
                ]))));
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in