How to close self OverlayEntry onTap - dart

I have an OverlayEntry that displays fullscreen. I want to dispatch an actions an close it onTap of the overlayentry's buttons
OverlayEntry _buildOverlayFeedback(BuildContext context, String tituloEvento) {
return OverlayEntry(
builder: (context) => Material(
child: Container(
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
ListTile(
leading: Icon(Icons.sentiment_dissatisfied),
title: Text('No me ha gustado'),
onTap: () {
// how to close myself????
},
),
ListTile(
leading: Icon(Icons.sentiment_very_satisfied),
title: Text('Muy bien'),
onTap: () {}),
],
),
],
),
),
),
);
}

You call remove() on the OverlayEntry itself.
This could be one way of doing it:
OverlayEntry _buildOverlayFeedback(BuildContext context, String tituloEvento) {
OverlayEntry entry;
entry = OverlayEntry(
builder: (context) => Material(
child: Container(
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
ListTile(
leading: Icon(Icons.sentiment_dissatisfied),
title: Text('No me ha gustado'),
onTap: () {
entry.remove();
},
),
ListTile(
leading: Icon(Icons.sentiment_very_satisfied),
title: Text('Muy bien'),
onTap: () {}),
],
),
],
),
),
),
);
return entry;
}

For those of you who are trying to figure out how to do this with FCM onMessage with Navigator.of(context).overlay.insert(entry) - chemamolins' answer works, you just have to adapt it slightly. Here's a similar example to get you started:
onMessage: (Map<String, dynamic> message) async {
OverlayEntry entry;
entry = OverlayEntry(builder: (context) {
return GestureDetector(
onTap: entry.remove,
child: SafeArea(
child: Align(
alignment: Alignment.topCenter,
child: Material(
type: MaterialType.transparency,
child: Container(
decoration: BoxDecoration(color: Colors.white),
width: double.infinity,
height: 60,
child: Column(
children: <Widget>[
Text(message['notification']['title']),
Text(message['notification']['body']),
],
),
),
),
),
),
);
});
Navigator.of(context).overlay.insert(entry);
},
And onTap will close out the OverlayEntry.

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: () {/* ... */},
),
],
),
],
),
),
),
),
//
],
),
);
}
}

How to fill the row with two buttons?

How to make two buttons expand equally over the entire width of the Navigation Drawer?
The main thing will be
ListTile(
title: Row(
children: <Widget>[
Expanded(child: RaisedButton(onPressed: () {},child: Text("Clear"),color: Colors.black,textColor: Colors.white,)),
Expanded(child: RaisedButton(onPressed: () {},child: Text("Filter"),color: Colors.black,textColor: Colors.white,)),
],
),
)
Complete Code
class SO extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Update the state of the app
// ...
},
),
ListTile(
//contentPadding: EdgeInsets.all(<some value here>),//change for side padding
title: Row(
children: <Widget>[
Expanded(child: RaisedButton(onPressed: () {},child: Text("Clear"),color: Colors.black,textColor: Colors.white,)),
Expanded(child: RaisedButton(onPressed: () {},child: Text("Filter"),color: Colors.black,textColor: Colors.white,)),
],
),
)
],
),
),
);
}
}
This worked for me
Row(
children: <Widget>[
RaisedButton(
onPressed: () {
Route route =
MaterialPageRoute(builder: (context) => MinionFlare());
Navigator.push(context, route);
},
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.4,
child: Text("Minion"),
),
),
RaisedButton(
onPressed: () {
Route route = MaterialPageRoute(
builder: (context) => EmojiRatingBar());
Navigator.push(context, route);
},
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.4,
child: Text("Emoji")),
),
],
),
You can wrap each button with Expanded.
Row(
children : <Widget>[
Expanded(
child: Button(
child: Text("Clear")
)
),
Expanded(
child: Button(
child: Text("Filter")
)
),
])
Container(
height: 100,
child: Row(
children : <Widget>[
Expanded(
child: RaisedButton(
onPressed: () {},
color: Color(0xff0000ff),
child: Text("Left Button", style: TextStyle(color: Colors.white),)
)
),
Expanded(
child: RaisedButton(
onPressed: () {},
color: Color(0xffd4d4d4),
child: Text("Right Button")
)
),
])
)

How can do card buttons fit together like Reddit App in Flutter?

I want to my card button fit together like Reddit App. How can do that?
Outside the main Row has a Container and Container' has padding height 15.0 . How can Row's widget fit that height 15.0 responsively.
Reddit card buttons
My app card buttons
This is my code;
#override
Widget build(BuildContext context) {
return new SafeArea(
top: false,
bottom: false,
child: new Card(
child: new Column(
children: <Widget>[
new Container(
padding: EdgeInsets.fromLTRB(5.0, 15.0, 5.0, 3.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
color: Colors.blueGrey,
child: new Row(
children: <Widget>[
new Icon(Icons.arrow_drop_up),
new Text('Vote'),
new Icon(Icons.arrow_drop_down),
],
),
),
new Container(
color: Colors.blueGrey,
child: new Row(
children: <Widget>[
new Icon(Icons.mode_comment),
new Text('Comment'),
],
),
),
new Container(
color: Colors.blueGrey,
child: new Row(
children: <Widget>[
new Icon(Icons.share),
new Text('Share'),
],
),
),
],
),
)
],
),
),
);
}
Hello and welcome to Flutter :)
First of all you have used too much padding i.e. 15.0 so that is why your grey boxes are smaller than that of Reddit example.
I have taken a simpler approach and designed a sample control for you. Hope you like it.
import 'package:flutter/material.dart';
void main() {
runApp(RedditButtonsExample());
}
class RedditButtonsExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Reddit Buttons Example",
home: HomePage(),
theme: ThemeData(
primaryColor: Colors.white,
accentColor: Colors.white,
),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Reddit Buttons Example'),
),
body: Column(
children: <Widget>[
Expanded(child: Icon(Icons.insert_emoticon)),
RedditButtonsCard(), //Example widget.
],
),
);
}
}
//This is the example control that you need.
class RedditButtonsCard extends StatelessWidget {
const RedditButtonsCard({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Card(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton.icon(
textColor: Colors.white,
icon: Icon(
Icons.thumbs_up_down,
color: Colors.white,
),
label: Text('Vote'),
onPressed: () {},
),
FlatButton.icon(
color: Colors.white30,
textColor: Colors.white,
icon: Icon(
Icons.mode_comment,
color: Colors.white,
),
label: Text('Comment'),
onPressed: () {},
),
FlatButton.icon(
textColor: Colors.white,
icon: Icon(
Icons.share,
color: Colors.white,
),
label: Text('Share'),
onPressed: () {},
),
],
),
),
);
}
}
I used Table and TableRow and I found what I wanted. Off the topic but I want to say this; I found this solution in my dream. I said my self "you have to use DataTable or something then you got what you want." My subconscious full of with Flutter I guess. :D
#override
Widget build(BuildContext context) {
return new SafeArea(
top: false,
bottom: false,
child: new Card(
child: new Column(
children: <Widget>[
new Table(
children: [
new TableRow(
children: [
new InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.fromLTRB(5.0, 15.0, 5.0, 15.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(FontAwesomeIcons.arrowAltCircleUp, color: Colors.white),
Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: new Text('Vote', style: TextStyle(color: Colors.white)),
),
new Icon(FontAwesomeIcons.arrowAltCircleDown, color: Colors.white),
],
),
),
),
new InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.fromLTRB(5.0, 15.0, 5.0, 15.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.mode_comment, color: Colors.white),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: new Text('Comment', style: TextStyle(color: Colors.white)),
),
],
),
),
),
new InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.fromLTRB(5.0, 15.0, 5.0, 15.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.share, color: Colors.white),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: new Text('Share', style: TextStyle(color: Colors.white)),
),
],
),
),
),
],
),
],
),
],
),
),
);
}

How to use Drawer without Scaffold.drawer?

I've noticed that Drawer of Scaffold.drawer only shows up when an AppBar of Scaffold is present.
But Instead of AppBar,I Used BottomAppBar present in BottomNavigationBar.
How do I get Drawer working with BottomAppBar?
Here's my code Below for which Drawer dosen't appear
class homieclass extends State<homie>{
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
backgroundColor: Colors.white70.withOpacity(0.9),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(onPressed: (){},backgroundColor: Colors.redAccent,child: ImageIcon(new AssetImage("ast/hello123.png")),),
bottomNavigationBar: BottomAppBar(child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,mainAxisSize: MainAxisSize.max,children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: (){}),IconButton(icon: Icon(Icons.message), onPressed: (){}),
],
),
),
body: new Column(
children: <Widget>[new SizedBox(height: 50.0, ),
Container(margin: EdgeInsets.only(left: 0.0),child: new Text("Events",textAlign: TextAlign.left,style: TextStyle(fontFamily: 'ssfr',fontSize: 35.0,fontWeight: FontWeight.bold),),)
, Container(margin: EdgeInsets.only(left: 10.0,right: 10.0) ,width: 360.0,height: 40.0,decoration: new BoxDecoration(color: Colors.blueGrey.withOpacity(0.2),
border: new Border.all(color: Colors.blueGrey.withOpacity(0.0), width: 2.0),
borderRadius: new BorderRadius.circular(10.0),),child: new Row(children: <Widget>[SizedBox(width: 10.0,),Icon(Icons.search,color: Colors.blueGrey.withOpacity(0.9),),Text(" Search",style: TextStyle(fontFamily: 'ssft',color: Colors.blueGrey,fontSize: 20.0),)],),)
,new SizedBox(height: 10.0,),new SizedBox(
height: 5.0,
child: new Center(
child: new Container(
margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
height: 2.0
,
color: Colors.redAccent.withOpacity(0.8),
),
),
),],
),drawer: new Drawer(
child: new ListView(
children: <Widget>[ListTile(title: Text("hello"),)],
),
),
),
);
}
It works perfectly for me. Here is a working example with a dedicated "Show Drawer" button in the bottom bar (the drawer can also be dragged in from the left):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Playground',
home: TestPage(),
);
}
}
class TestPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Body'),
),
bottomNavigationBar: Builder(builder: (BuildContext context) {
return BottomAppBar(
color: Colors.orange,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: () {
Scaffold.of(context).openDrawer();;
}),
IconButton(icon: Icon(Icons.message), onPressed: () {}),
],
),
);
},),
drawer: Drawer(
child: SafeArea(
right: false,
child: Center(
child: Text('Drawer content'),
),
),
),
);
}
}
Flutter version: Latest master build (though I'm also quite sure that it works with the beta version)
You can use Drawer, but you must supply a DrawerController, and also arrange for the drawer to overlay your other content. This is easy to do with a Stack. Its important that the stack hold a non-transparent container, otherwise you'll get rendering artifacts when the draw slides in and out. Scaffold doesn't require this, however, annoyingly, it also rebuild the other content as the draw moves (exactly the type of thing they've tried to avoid).
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutterui/util/layout_util.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) =>
MaterialApp(title: 'Flutter Playground',
home: Material(child:DrawerStack(body: body(), drawer: _drawer())));
}
Drawer _drawer() =>Drawer(
child: SafeArea(
child: Center(
child: Column(
children: [
Text('endDrawer content'),
Builder(builder:(context) => RaisedButton(
child: Text('Click', semanticsLabel: 'Click 2'),
onPressed: () {
Navigator.pop(context);
},
)),
],
),
),
),
);
Widget body() => Container(
decoration: BoxDecoration(color: Color.fromARGB(255, 255, 255, 255)),
child: SafeArea(
child: Center(
child: Column(children: [
Text('Body'), // style:TextStyle(fontSize: 14.0,color: Colors.black)),
Builder(builder:(context) => RaisedButton(
child: Text('Open drawer'),
onPressed: () {
(context.ancestorWidgetOfExactType(DrawerStack) as DrawerStack).openDrawer();
// DrawerStack.of(context).openDrawer();
})),
]))));
class DrawerStack extends StatelessWidget {
final GlobalKey<DrawerControllerState> _drawerKey =
GlobalKey<DrawerControllerState>();
final drawerScrimColor = Color.fromARGB(90, 100, 100, 128);
final double drawerEdgeDragWidth = null;
final DragStartBehavior drawerDragStartBehavior = DragStartBehavior.start;
final Widget body;
final Drawer drawer;
DrawerStack({Key key, this.body, this.drawer}) : super(key: key);
void openDrawer() {
_drawerKey.currentState?.open();
}
#override
Widget build(BuildContext context) => Stack(
children: [
// body
body,
DrawerController(
key: _drawerKey,
alignment: DrawerAlignment.end,
child: drawer,
drawerCallback: (_){},
dragStartBehavior: drawerDragStartBehavior,
//widget.drawerDragStartBehavior,
scrimColor: drawerScrimColor,
edgeDragWidth: drawerEdgeDragWidth,
),
],
);
}
You can openDrawer of global key from the flutter itself to do the job.
Scaffold.of(context).openDrawer() / Scaffold.of(context).openEndDrawer();
scaffoldKey.currentState.openDrawer(); / scaffoldKey.currentState..openEndDrawer();
Case 1
bottomNavigationBar:BottomAppBar(
elevation: 10,
shape: CircularNotchedRectangle(),
child: Container(
height: 80,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: GestureDetector(
onTap: () {
Scaffold.of(context).openDrawer();
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.dashboard),
Text(
'DASHBOARD',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.home),
Text(
'CHALLENGES',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: (){},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.public),
Text(
'Public',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.sentiment_satisfied),
Text(
'Settings',
style: TextStyle(color: Colors.black),
),
],
),
),
),
],
),
),
color: AppColors.WHITE,
);
Case 2
or you can scaffold key
class BottomBar {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
bottomNavigationBar: BottomAppBar(
elevation: 10,
shape: CircularNotchedRectangle(),
child: Container(
height: 80,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: GestureDetector(
onTap: () {
scaffoldKey.currentState.openDrawer();
// scaffoldKey.currentState.openEndDrawer(); // use to open end drawer
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.dashboard),
Text(
'DASHBOARD',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.home),
Text(
'CHALLENGES',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.public),
Text(
'Public',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.sentiment_satisfied),
Text(
'Settings',
style: TextStyle(color: Colors.black),
),
],
),
),
),
],
),
),
color: AppColors.WHITE,
));
}
}

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