flutter scrollview not scrolling - dart

I have this
Widget _Project() {
return new ListView(
children: <Widget>[
Container(
child: Card(
color: _Cardcolor,
child: Center(
child: Text(
'Projects',
style: new TextStyle(
fontSize: 40.0,
),
),
),
),
margin: EdgeInsets.only(left: 50.0, right: 50.0, top: 10.0),
height: 130.0,
width: 15.0,
),
Divider(
height: 40,
),
Container(
child: FutureBuilder<List<Project>>(
future: fetchProjects(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? ProjectList(projects: snapshot.data)
: Center(child: CircularProgressIndicator());
},
),
)
],
) ;
}
and this is the builder
class ProjectList extends StatelessWidget {
final List<Project> projects;
ProjectList({Key key, this.projects}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView.builder(
shrinkWrap: true,
itemCount: projects.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Container(
color: Colors.white10,
alignment: Alignment.center,
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
title: Text(projects[index].ProjectId),
subtitle: Text(projects[index].ProjectId),
),
ButtonTheme.bar(
// make buttons use the appropriate styles for cards
child: ButtonBar(
children: <Widget>[
FlatButton(
child: const Text('Open'),
onPressed: () {/* ... */},
),
],
),
),
],
),
)),
],
);
},
);
}
}
So, i'm creating the list with card. Here is the screenshot
the data is from json and it is showing properly. Well, it is not showing properly because i have 5 and it is only showing 3, well it is because the scrolling problem. When i make the card smaller all of my data is showing up.
I already try to add this line
physics: const AlwaysScrollableScrollPhysics()
But still no help, I'm stuck now
How can i fix it ? did i miss something ?

In Your class - ProjectList() - ListView.builder - add - physics: ClampingScrollPhysics(),
Widget build(BuildContext context) {
return ListView.builder(
physics: ClampingScrollPhysics(), // add this
shrinkWrap: true,
itemCount: projects.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[ ...
update:
To make the card list scroll only not the whole page - replace top Listview with the column.
return Scaffold(
body: Column( // replace from listview
children: <Widget>[
SizedBox(height: 15.0,),
Container(
child: Card(
// color: _Cardcolor,
child: Text(
'Projects',
style: new TextStyle(
fontSize: 44.0,
),
),
),
margin: EdgeInsets.only(left: 50.0, right: 50.0, top: 15.0),
height: 130.0,
// width: 15.0,
),
Divider(
height: 40,
),
Expanded( // add Expanded
child: Container(
child: ProjectList(
projects: ['anmol', 'anmol', 'dummy', 'demo'],
),
// child: FutureBuilder<List<Project>>(
// future: fetchProjects(http.Client()),
// builder: (context, snapshot) {
// if (snapshot.hasError) print(snapshot.error);
// return snapshot.hasData
// ? ProjectList(projects: snapshot.data)
// : Center(child: CircularProgressIndicator());
// },
// ),
),
)
],
),

Related

using one cards property how to create multiple cards using buttons,when we click on button ,it must create card using declared card property

import 'package:demo_app/transaction.dart';
import 'package:flutter/material.dart';
class TransactionList extends StatelessWidget {
final List transactions;
TransactionList(this.transactions);
#override
Widget build(BuildContext context) {
return
Container(
margin:EdgeInsets.symmetric(horizontal: 10),
height: 270,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Row(children:
<Widget>[
Text(" Groups",
style: TextStyle(color: Colors.black, fontSize: 25)),
]),
GestureDetector(
child:
// ignore: unnecessary_new
new Card(
shadowColor:Colors.red,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 15,
color: Colors.purpleAccent,
child: Container(
width: 160,
height: 240,
child:
Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
height: 140,
width: 140,
child: Image.network('https://images.pexels.com/photos/1767434/pexels-photo-1767434.jpeg?cs=srgb&dl=pexels-j-u-n-e-1767434.jpg&fm=jpg')),
const ListTile(
leading: Icon(Icons.flight),
title: Text('card2'),
),
ButtonBar(
children: <Widget>[
// FlatButton(
// color: Colors.red,
// child: const Text('BUY TICKETS'),
// onPressed: () {/* ... */},
// ),
FlatButton(
color: Colors.redAccent,
child: const Text('Add'),
onPressed: () {/* ... */},
),
],
),
],
),
),
),
),
//
],
),
);
}
}

Scroll controller is not attached to any scroll views

I am attaching scrollController to a listView builder. I am controlling scrolling using Slider.B ut I am getting error "Scroll controller is not attached to any scroll views".If I set max of Slider to some static value error is gone but if i set max = scrollController.position.maxScrollExtent it gives error.
scrollController = ScrollController(initialScrollOffset: 0.0);
scrollController.addListener(scrollListener);
Container(
decoration: BoxDecoration(color: Colors.black),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: ListView.builder(
controller: scrollController,
scrollDirection: Axis.horizontal,
itemCount: totalSegments,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 70.0,
width: 148.0,
margin: EdgeInsets.only(top: 10.0),
decoration: BoxDecoration(
color: Colors.grey[800],
),
child: Row(
children: <Widget>[
Container(
width: 20.0,
decoration: BoxDecoration(color: Colors.grey[900]),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 7.0,
height: 7.0,
decoration:
BoxDecoration(color: Colors.white),
),
Container(
width: 7.0,
height: 7.0,
decoration:
BoxDecoration(color: Colors.white),
),
Container(
width: 7.0,
height: 7.0,
decoration:
BoxDecoration(color: Colors.white),
),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),
),
margin:
new EdgeInsets.only(top: 1.0, bottom: 1.0),
child: selectedSegment[index] != null
? SizedBox(
height: double.infinity,
width: double.infinity,
child: Center(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
selectedSegment[index]
['segmentUrl']),
),
),
)),
)
: Container(),
),
),
],
),
),
Container(
width: 148.0,
height: MediaQuery.of(context).size.height - 130.0,
child: ListView(
scrollDirection: Axis.vertical,
children: buildSegmentList(index),
),
),
],
);
},
),
),
Try this code i got bottom and up event state in listview..
class ScrollViewDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: ScrollViewTest(),
);
}
}
class ScrollViewTest extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return ScrollViewState();
}
}
class ScrollViewState extends State<ScrollViewTest> {
ScrollController _controller;
String message = "";
_scrollListener() {
if (_controller.offset >= _controller.position.maxScrollExtent &&
!_controller.position.outOfRange) {
setState(() {
message = "reach the bottom";
});
}
if (_controller.offset <= _controller.position.minScrollExtent &&
!_controller.position.outOfRange) {
setState(() {
message = "reach the top";
});
}
}
#override
void initState() {
_controller = ScrollController();
_controller.addListener(_scrollListener);
super.initState();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Scrollview Demo"),
),
body: Column(
children: <Widget>[
Container(
height: 50.0,
color: Colors.green,
child: Center(
child: Text(message),
),
),
Expanded(
child: ListView.builder(
controller: _controller,
itemCount: 30,
itemBuilder: (context, index) {
return ListTile(title: Text("Index : $index"));
},
),
),
],
),
);
}
}

Adding a button to the bottom of a listview widget in flutter

I currently have a listview operating on the whole of my screen. I would like to have a button in the bottom of the screen, thus splitting it up so the listview doens't fill up the whole of my window.
This is the current code building the class:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('HT scoreboard'),
),
body: _buildBody(context),
);
}
Widget _buildBody(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('Spillere').orderBy("score", descending: true).snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return LinearProgressIndicator();
return _buildList(context, snapshot.data.documents);
},
);
}
Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
return ListView(
padding: const EdgeInsets.only(top: 10.0),
children: snapshot.map((data) => _buildListItem(context, data)).toList(),
);
}
Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
final record = Record.fromSnapshot(data);
return Padding(
key: ValueKey(record.name),
padding: const EdgeInsets.all(5.0),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(5.0),
),
child: ListTile(
title: Text(record.name + ": " + record.score.toString()),
trailing: new IconButton(icon: new Icon(isAdmin ? Icons.add : null, color: Colors.green),
onPressed: (){
if(isAdmin){
record.reference.updateData({'score': record.score + 1});
}
}
),
),
),
);
change your buildlist function to include a column with the button and listview as children
Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
return Column(
children:[
Expanded(
child: ListView(
padding: const EdgeInsets.only(top: 10.0),
children: snapshot.map((data) => _buildListItem(context, data)).toList(),
),
),
RaisedButton(
// fill in required params
)
])
}
To prevent the buttons being pushed above the keyboard;
return CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// list items
],
),
),
SliverFillRemaining(
hasScrollBody: false,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
RaisedButton()
],
),
)
],
);

How to solve scrolling in list view when gridview as a child?

How to solve the scrolling issue in flutter layout when adding gridview inside listview. in android studio java we use NestedScrollView to solve this type of issue What is the solution for flutter?
I need to scrolling continues with out any problem with listview with custom view and gridview.Now then gridview is only allowing to scroll gridview if i scroll grid view then top imageview is not scrolling .How to solve this issue?
body:
ListView(
children: <Widget>[
new Image.network("https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
Container(
height: 300.0,
child: GridView.count(
crossAxisCount: 3,
childAspectRatio: .6,
children: _list.map((p) => ProductManagment(p)).toList(),
),
)
],
)
After adding #deniss answer
SOLVED
Instead of use ListView you should use Column Widget Like below.
body:
Column(
children: <Widget>[
Container (
height: 150.0, // Set as you want
child: Image.network("https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg")),
Container(
height: 300.0,
child: GridView.count(
crossAxisCount: 3,
childAspectRatio: .6,
children: _list.map((p) => ProductManagment(p)).toList(),
),
)
],
)
Because of `GridView` itself has scroll effect.
EDITED:
Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
child: ListView(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 200,
child: Image.network(
"https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
),
ConstrainedBox(
constraints: BoxConstraints(
minHeight: 80, // Set as you want or you can remove it also.
maxHeight: double.infinity,
),
child: Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
childAspectRatio: .6,
children: _list.map((p) => ProductManagment(p)).toList(),
),
),
)
],
),
],
),
));
You have to use ConstrainedBox with set maxHeight: double.infinity and GridView.count set shrinkWrap: true,. and remove container height 300.
Also if you want to change
Container(
height: 200,
child: Image.network(
"https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
),
To Just
Image.network("https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg")
Than you can change it.
I had the same issue. However, I did not want the issue of Overflowed by... that comes with a Column/Row and instead added physics: ScrollPhysics() to my GridView.count to resolve this issue. Found my answer from this response to a similar issue.
use this
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 2.0,
mainAxisSpacing: 2.0,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
children: List.generate(choices.length, (index) {
return Center(
child: new Column(
children: [
new Expanded(
child: SelectCard(choice: choices[index]),
),
],
),
);
}),
));
and full code for better explanation
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
var url = "https://miro.medium.com/max/2160/1*9JzKFil-Xsip742fdxDqZw.jpeg";
class Dashboard extends StatefulWidget {
_Dashboard createState() => _Dashboard();
}
Widget _buildAvatar(BuildContext context, Orientation orientation) {
return Container(
height: 300.0,
color: Colors.blue,
child: Center(
child: CircleAvatar(
backgroundColor: Colors.white,
child: Text('RR'),
),
),
);
}
Widget _buildFields(BuildContext context) {
return Container(
color: Colors.white,
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 2.0,
mainAxisSpacing: 2.0,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
children: List.generate(choices.length, (index) {
return Center(
child: new Column(
children: [
new Expanded(
child: SelectCard(choice: choices[index]),
),
],
),
);
}),
));
}
class _Dashboard extends State<Dashboard> {
#override
Widget build(BuildContext context) {
return OrientationBuilder(builder: (context, orientation) {
return ListView(
children: <Widget>[
Container(
height: 200,
child: Image.network(
"https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
),
_buildFields(context),
],
);
});
}
}
class Choice {
const Choice({this.title, this.icon});
final String title;
final IconData icon;
}
const List<Choice> choices = const <Choice>[
const Choice(title: 'Home', icon: Icons.home),
const Choice(title: 'Contact', icon: Icons.contacts),
const Choice(title: 'Map', icon: Icons.map),
const Choice(title: 'Phone', icon: Icons.phone),
const Choice(title: 'Camera', icon: Icons.camera_alt),
const Choice(title: 'Setting', icon: Icons.settings),
const Choice(title: 'Album', icon: Icons.photo_album),
const Choice(title: 'WiFi', icon: Icons.wifi),
];
class SelectCard extends StatelessWidget {
const SelectCard({Key key, this.choice}) : super(key: key);
final Choice choice;
#override
Widget build(BuildContext context) {
final TextStyle textStyle = Theme.of(context).textTheme.display1;
return Container(
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 1,
),
itemBuilder: (contxt, indx) {
return Card(
elevation: 4,
margin: EdgeInsets.all(8),
color: Colors.white70,
child: Padding(
padding: const EdgeInsets.only(top: 25),
child: Container(
width: 4,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Expanded(
child: new Container(
child: new Icon(
choice.icon,
color: Colors.black,
size: 50.0,
),
),
flex: 2,
),
new Expanded(
child: new Container(
margin: EdgeInsets.only(top: 12),
child: new Text(
choice.title,
style:
TextStyle(fontSize: 16, color: Colors.black),
)),
flex: 1,
),
]),
),
),
);
},
),
);
}
}

Unable to display on column 2

I have the below display and data is coming from JSON. But, the problem is data is showing only on one column all the time. How do I make sure it is like left to right till all the data is filled?
this is the code. As you can see that I am creating a card and having the rest of the details inside the card and then in another code I am looping till I have all the JSON details.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:elegal_dart/models/items.dart';
import 'package:elegal_dart/services/api.dart';
class LostPage extends StatefulWidget {
#override
_LostPage createState() => new _LostPage();
}
class _LostPage extends State<LostPage> {
List<Item> _items = [];
#override
void initState() {
super.initState();
_loadLostItems();
}
_loadLostItems() async {
String fileData =
await DefaultAssetBundle.of(context).loadString("assets/items.json");
setState(() {
_items = ItemApi.allItemsFromJson(fileData);
});
print(_items.toString());
}
Widget _buildLostItems(BuildContext context, int index) {
Item item = _items[index];
return GridView.count(
shrinkWrap: true,
crossAxisCount: 2,
children: <Widget>[
Card(
child: Column(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.height / 2.5,
child: DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
item.item_DispPic),
fit: BoxFit.cover),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: FractionalOffset.topLeft,
child: CircleAvatar(
backgroundColor: Colors.redAccent,
radius: 15.0,
child: Text(
"NEW",
textScaleFactor: 0.5,
),
),
),
),
Align(
alignment: FractionalOffset.topRight,
child: Container(
color: Colors.blueAccent,
height: 35.0,
width: 35.0,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.account_circle),
Text(
"1P",
textScaleFactor: 0.5,
),
],
),
),
),
),
],
),
),
Center(
child: Container(
padding: const EdgeInsets.all(8.0),
alignment: FractionalOffset.bottomCenter,
child: Text(
"MEGADISH",
style: TextStyle(
fontWeight: FontWeight.w700,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
child: Text(
"Add To Cart",
style: TextStyle(color: Colors.grey[500]),
),
onPressed: () => null,
),
Text(
"\$5",
style: TextStyle(color: Colors.grey[500]),
)
],
)
],
),
),
],
);
}
Widget _getAppTitleWidget() {
return new Text(
'Lost Items',
style: new TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 32.0,
),
);
}
Widget _buildBody() {
return new Container(
margin: const EdgeInsets.fromLTRB(
8.0, // A left margin of 8.0
56.0, // A top margin of 56.0
8.0, // A right margin of 8.0
0.0 // A bottom margin of 0.0
),
child: new Column(
// A column widget can have several
// widgets that are placed in a top down fashion
children: <Widget>[
//_getAppTitleWidget(),
_getListViewWidget()
],
),
);
}
Future<Null> refresh() {
_loadLostItems();
return new Future<Null>.value();
}
Widget _getListViewWidget() {
return new Flexible(
child: new RefreshIndicator(
onRefresh: refresh,
child: new ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
itemCount: _items.length,
itemBuilder: _buildLostItems
)
)
);
}
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.blue,
body: _buildBody(),
);
}
}
I made it work as follows (if I understood correctly your objective which was to display as a 2-column grid).
It also scrolls, which with your code did not work.
#override
Widget build(BuildContext context) {
return new SafeArea(
top: false,
bottom: false,
child: new Scaffold(
appBar: new AppBar(
title: _getAppTitleWidget(),
),
backgroundColor: Colors.blue,
body: _buildBody(),
),
);
}
Widget _buildBody() {
int numberOfColumns = 2;
return new Container(
padding: const EdgeInsets.all(8.0),
child: new GridView.builder(
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: numberOfColumns),
itemBuilder: _buildLostItems,
itemCount: _items.length,
),
);
}
Widget _buildLostItems(BuildContext context, int index) {
Item item = _items[index];
return new GridTile(
child: Card(
child: Column(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.height / 2.5,
child: DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
item.item_DispPic),
fit: BoxFit.cover),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: FractionalOffset.topLeft,
child: CircleAvatar(
backgroundColor: Colors.redAccent,
radius: 15.0,
child: Text(
"NEW",
textScaleFactor: 0.5,
),
),
),
),
Align(
alignment: FractionalOffset.topRight,
child: Container(
color: Colors.blueAccent,
height: 35.0,
width: 35.0,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.account_circle),
Text(
"1P",
textScaleFactor: 0.5,
),
],
),
),
),
),
],
),
),
Center(
child: Container(
padding: const EdgeInsets.all(8.0),
alignment: FractionalOffset.bottomCenter,
child: Text(
"MEGADISH",
style: TextStyle(
fontWeight: FontWeight.w700,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
child: Text(
"Add To Cart",
style: TextStyle(color: Colors.grey[500]),
),
onPressed: () => null,
),
Text(
"\$5",
style: TextStyle(color: Colors.grey[500]),
)
],
)
],
),
),
);
}
Here is the output:
Hope this helps.
***** Refer to other solution *****
Could you please try the following?
Update the numberOfColumns as you wish.
int numberOfColumns = 2;
List<Item> _items = <Item>[ ... ];
#override
Widget build(BuildContext context){
GridView gridView = new GridView.builder(
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: numberOfColumns),
itemBuilder: _buildLostItems,
itemCount: _items.length,
);
return new SafeArea(
top: false,
bottom: false,
child: new Scaffold(
appBar: new AppBar(
title: new Text('title'),
),
body: gridView,
),
);
}
_buildLostItems(BuildContext context, int index){
Item item = _items[index];
return new Card(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new Stack(
fit: StackFit.expand,
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.height / 2.5,
child: DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(item.item_DispPic),
fit: BoxFit.cover),
),
),
),
),
new Padding(
padding: const EdgeInsets.all(8.0),
child: new Align(
alignment: FractionalOffset.topLeft,
child: new CircleAvatar(
backgroundColor: Colors.redAccent,
radius: 15.0,
child: const Text(
"NEW",
textScaleFactor: 0.5,
),
),
),
),
],
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new FlatButton(
child: new Text(
"Add To Cart",
style: new TextStyle(color: Colors.grey[500]),
),
onPressed: () {},
),
new Text(
"\$5",
style: new TextStyle(color: Colors.grey[500]),
)
],
),
],
),
);
}

Resources