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.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