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))
]))));
}),
)
]))));
}
}