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
