I'm working in a restaurant delivery app, I purchase it in Codecanyon but the support is so bad... I discover a bug in a Cart Dart and the scroll don't work... I receive the "Bottom Overflow Error"
I try all Google tutorials but don't have idea what is bad.
This is my code:
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: Helper.of(context).onWillPop,
child: Scaffold(
key: _con.scaffoldKey,
bottomNavigationBar: CartBottomDetailsWidget(con: _con),
appBar: AppBar(
automaticallyImplyLeading: false,
leading: IconButton(
onPressed: () {
if (widget.routeArgument != null) {
Navigator.of(context).pushReplacementNamed(widget.routeArgument.param, arguments: RouteArgument(id: widget.routeArgument.id));
} else {
Navigator.of(context).pushReplacementNamed('/Pages', arguments: 2);
}
},
icon: Icon(Icons.arrow_back),
color: Theme.of(context).hintColor,
),
backgroundColor: Colors.transparent,
elevation: 0,
centerTitle: true,
title: Text(
S.of(context).cart,
style: Theme.of(context).textTheme.headline6.merge(TextStyle(letterSpacing: 1.3)),
),
),
body: RefreshIndicator(
onRefresh: _con.refreshCarts,
child: _con.carts.isEmpty
? EmptyCartWidget()
: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: [
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, right: 10),
child: ListTile(
contentPadding: EdgeInsets.symmetric(vertical: 0),
leading: Icon(
Icons.shopping_cart,
color: Theme.of(context).hintColor,
),
title: Text(
S.of(context).shopping_cart,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.headline4,
),
subtitle: Text(
S.of(context).verify_your_quantity_and_click_checkout,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.caption,
),
),
),
ListView.separated(
padding: EdgeInsets.symmetric(vertical: 15),
scrollDirection: Axis.vertical,
shrinkWrap: true,
primary: true,
itemCount: _con.carts.length,
separatorBuilder: (context, index) {
return SizedBox(height: 15);
},
itemBuilder: (context, index) {
return CartItemWidget(
cart: _con.carts.elementAt(index),
heroTag: 'cart',
increment: () {
_con.incrementQuantity(_con.carts.elementAt(index));
},
decrement: () {
_con.decrementQuantity(_con.carts.elementAt(index));
},
onDismissed: () {
_con.removeFromCart(_con.carts.elementAt(index));
},
);
},
),`
Without trying this but perhaps put Expanded around the ListView
Being a direct child of a Column it does not know how big it should be.
Expanded(
child: ListView.separated(...)
)
Related
I'm getting some weird white space when I drag the item to reorder it that is defined nowhere. How can I get rid of the white spacing and extend the card to fill this space?
That's how the white spacing looks like when reordering the item:
And that's my code to build the body of the Scaffold:
body:
Stack(
children: [
Positioned(
child: ReorderableListView.builder(
buildDefaultDragHandles: false,
itemCount: widget.cards.length,
itemBuilder: (context, index) {
return Dismissible(
key: Key(widget.cards[index].name),
onDismissed: (direction) {
setState(() {});
},
child:
Card(
child:
SizedBox(
height: 75,
child: ListTile(
tileColor: Colors.red.shade200,
title: Text(widget.cards[index].name),
trailing: ReorderableDragStartListener(
index: index,
child: const Icon(Icons.drag_handle),
),
onTap: (){
},
),
),
),
);
},
),
)
])
In your case Padding appear of Card Widget default margin. You can remove using this code . If you remove that not show the elevation of Card Widget. If you dont want that you can remove Card Widget.
Card(
margin: EdgeInsets.all(0),
child: SizedBox( .......
Use proxyDecorator to give your custom widget on reordering
result
Stack(children: [
Positioned(
child: ReorderableListView.builder(
padding: EdgeInsets.zero,
proxyDecorator: (child, i, d) { // Here
return Card(
child: SizedBox(
height: 75,
child: ListTile(
selectedTileColor: Colors.amber,
tileColor: Colors.red.shade200,
title: Text(cards[i]),
trailing: ReorderableDragStartListener(
index: i,
child: const Icon(Icons.drag_handle),
),
onTap: () {},
),
),
);
},
onReorder: (oldIndex, newIndex) {},
buildDefaultDragHandles: false,
itemCount: cards.length,
itemBuilder: (context, index) {
return Dismissible(
key: Key(cards[index]),
onDismissed: (direction) {
setState(() {});
},
child: Card(
child: SizedBox(
height: 75,
child: ListTile(
selectedTileColor: Colors.amber,
tileColor: Colors.red.shade200,
title: Text(cards[index]),
trailing: ReorderableDragStartListener(
index: index,
child: const Icon(Icons.drag_handle),
),
onTap: () {},
),
),
),
);
},
),
)
]);
I have a screen like this:
I'm trying to place the floatActionButton at the bottom right, but I couldn't.I'm putting the floatActionButton, but I couldn't put it in the bottom right.
How can I put it in the bottom right?
Codes:
Container(
child: Padding(
padding: EdgeInsets.only(left: 8, right: 8, bottom: 40),
child: Column(
children: [
SizedBox(height: 15,),
Text("Profile", style: TextStyle(fontSize: 27),),
Divider(thickness: 1, color: Colors.black,),
SizedBox(height: 5),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Solved Tests:",style: TextStyle(fontSize: 19)),
],
),
SizedBox(height: 20,),
Container(
width: double.infinity,
height: 200,
child: Expanded(
child: FutureBuilder(
future: listUpload(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
late List<String?> items;
if (!snapshot.hasData){
return Text("Not found");
}
if (snapshot.connectionState == ConnectionState.waiting) {
items = [];
} else if (snapshot.connectionState == ConnectionState.done &&
snapshot.hasData) {
items = snapshot.data as List<String?>;
} else {
items = [];
}
return Scrollbar(
isAlwaysShown: true,
controller: _scrollContreller,
scrollbarOrientation: ScrollbarOrientation.right,
child: ListView.builder(
controller: _scrollContreller,
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.only(bottom: 20, left: 10, right: 10),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10),
),
child: ListTile(
title: Text(
items[index].toString(),
style: TextStyle(fontSize: 20),
),
),
),
);
},
),
);
})),
),
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
SizedBox(height: 15,),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: Container(
width: 250,
height: 40,
child: GFButton(
text: "Temizle", textStyle: TextStyle(fontSize: 20, color: Colors.red),
color: Colors.red,
type: GFButtonType.outline2x,
onPressed: () {
AlertDialog eminlik = AlertDialog(
title: Text("Onay"),
content: Text("Çözdüğünüz testlerin kayıtları silinecektir. Emin misiniz?"),
actions: [
FlatButton(
child: Text("Evet"),
onPressed: () {
Navigator.pop(context);
setState(() {
eminlikSil();
});
},
),
FlatButton(
child: Text("Hayır"),
onPressed: () {
Navigator.pop(context);
},
)
],
);
showDialog(context: context, builder: (context) => eminlik);
},
),
),
),
],
),
),
// !!!!!!!!!!! <<<<<<<<<
// !!!!!!!!!!! <<<<<<<<<
FloatingActionButton(
child: Text("FAB"),
onPressed: () {}),
],
),
),
),
In the code I provided, I commented out where I put the floatActionButton.I put the codes of the screen in the picture directly. floatActionButton codes are below.
Thanks in advance for the help.
Looks like you want the achieve the default material design behaviour, in that case use a Scaffold and set the floatingActionButton value
return Scaffold(
body: , // paste your page content here
floatingActionButton: FloatingActionButton(
child: Text("FAB"),
onPressed: () {},
),
);
Your floating action button will placed at the bottom because it's the default behaviour, if you want to change that play with the value of floatingActionButtonLocation
if you don't want to relay on Scaffold use a Stack widget instead
return Stack(
children: [
// paste your page content here
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
child: Text("FAB"),
onPressed: () {},
),
)
],
);
You just need to put the floatingActionButton as a named parameter of Scaffold.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Floating Action Button'),
),
body: const Center(child: Text('Press the button below!')),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
backgroundColor: Colors.green,
child: const Icon(Icons.add),
),
);
}
Reference: official flutter documentation
The easiest way to add a FloatingActionButton is to add it directly to your Scaffold.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
Another solution would be to encapsulate your view in a Stack and to add your FloatingActionButton in an Align.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(children: [
Container(),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
)
],)
);
}
Well, if you're using Scaffold, it has floatingActionButton parameter. Where you should put your float, and if it doesn't place it to position you want you can correct it with floatingActionButtonLocation parameter.
Example:
Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
)
Otherwise, you can wrap FloatActionButton with Align widget. And give it alignment as you want.
You can set Alignment for use Container or Align Widget .
Using Container:
Container(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
onPressed: () {},
child: Icon(
Icons.add,
),
),
),
Using Align:
Align(
alignment: Alignment.bottomRight,
child: Container(
child: FloatingActionButton(
hoverColor: Colors.black,
elevation: 10,
onPressed: () {},
child: Icon(
Icons.add,
),
),
),
),
Using Scaffold:
Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
);
Result Screen->
my screen is not scrollable , and has limit height ( only scrollable in the limit height )
I do want to make my page on there for scrollable,
here is my current page now :
if you see in the gif above, my page is not scrollable and only stuck in the one box and scrollable inside, I do love to scroll able them for all page normally, should I use ListView here ?? but how can I make the pic and text for responsive like above ? but I do make the hight of text too close also, can I know how u tiny up the text on the list also ??
here is my code for that Widget
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
data['title'],
softWrap: true,
),
),
body: Container(
padding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.05),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
flex: 1,
child: Align(
alignment: Alignment.center,
child: Image.network('https://i.ibb.co/nrWqyMx/belgium.png'),
)
),
Expanded(
flex: 2,
child: Align(
alignment: Alignment.topLeft,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Container(
height: MediaQuery.of(context).size.width * 0.14,
child: ListTile(
leading: Icon(Icons.radio_button_checked, size: 17),
title: Text(data['ingredients'][index], style: TextStyle(height: 1.3),),
)
);
},
itemCount: data['ingredients'].length,
),
)
)
],
),
),
);
}
link : flutter codepen
Scaffold(
appBar: AppBar(
title: Text(
'MyAppBar',
style:
TextStyle(color: Colors.cyan[100], fontWeight: FontWeight.bold),
),
),
body: ListView(
children: <Widget>[
Container(
child: Image.network
('https://i.ibb.co/nrWqyMx/belgium.png'),
),
ListView.builder(
physics: ScrollPhysics(),
shrinkWrap: true,
itemBuilder: (ctx, index) {
return Container(
height: MediaQuery.of(context).size.width * 0.14,
child: ListTile(
leading: Icon(Icons.radio_button_checked, size: 17),
title: Text("data['ingredients'][index]", style: TextStyle(height: 1.3),),
)
);
},
itemCount:25,
)
],
),
);
You will need put a ScrollView as a main container of your widget. Something like this:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
color: Colors.red,
child: SingleChildScrollView(
child: Column(
children: [
Text("Title"),
ListView.builder(
shrinkWrap: true,
itemCount: 3,
itemBuilder: (context, index) {
return Container(
height: 300,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.black,
style: BorderStyle.solid
)
),
);
},
)
],
),
),
)
);
}
}
I am designing a view for creating a group of users from firestore data. I want a view like whatsapp type create a group design. Below is my code :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepOrange,
titleSpacing: 0.0,
centerTitle: true,
automaticallyImplyLeading: true,
leading: _isSearching ? const BackButton() : Container(),
title: _isSearching ? _buildSearchField() : Text("Create Group"),
actions: _buildActions(),
),
body: _buildGroupWidget(),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.deepOrange,
elevation: 5.0,
onPressed: () {
// create a group
createGroup();
},
child: Icon(
Icons.send,
color: Colors.white,
),
),
);
}
Widget _buildGroupWidget() {
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
selectedUserList != null && selectedUserList.length > 0
? Container(
height: 90.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: selectedUserList.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
selectedUserList.removeAt(index);
setState(() {});
},
child: Container(
margin: EdgeInsets.only(
left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
child: Column(
children: <Widget>[
Container(
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
// color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
color: Colors.primaries[
index % Colors.primaries.length],
),
),
Container(
height: 20.0,
width: 50.0,
child: Center(
child: Text(
selectedUserList[index].userName,
softWrap: true,
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
);
},
),
)
: Container(),
Container(
alignment: Alignment.centerLeft,
height: 30,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.deepOrange,
boxShadow: [
BoxShadow(
color: Colors.orange, blurRadius: 5, offset: Offset(0, 2)),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Text(
"Contacts",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
),
),
userList != null && userList.length > 0
? ListView.builder(
shrinkWrap: true,
itemCount: userList.length,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return ListTile(
onTap: () {
if (selectedUserList.contains(userList[index])) {
selectedUserList.remove(userList[index]);
} else {
selectedUserList.add(userList[index]);
}
setState(() {});
},
title: Text(userList[index].userName),
subtitle: Text(userList[index].userContact),
leading: CircleAvatar(
backgroundColor: Colors.primaries[index],
),
);
},
)
: Center(
child: Text("Data Unavailable!!",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.blueGrey)))
],
),
);
}
The problem with my code is i want to center my last widget which is center widget which will be seen when there is no data. I want to set it to the center of the screen.
But, it not get to the center of the screen.
I have already tried with Expanded, Flex and other solutions from other resource references. But, it doesn't work for me.
Can anyone suggest me how to center my last widget ?
I think expanded should work wrapping your last widget.
Still, if it doesn't work for you then i you can remove the height of your other 2 widgets from full screen as your both widgets have static height which is 120 total here.
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height - 120,
child: Center(
child: Text("Data Unavailable!!",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.blueGrey)),
))
This will solve your issue for your case.
I have tried :
ListView.builder(
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return GridView.count(
crossAxisCount: 5,
children: List.generate(10, (index) {
return Center(
child: Text(
'$index AM',
),
);
}),
);
},
itemCount: partnerArr.length,
)
I want to make this type of list view in my Scaffold body, how can I do so?
You can try this Code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.separated(
separatorBuilder: (context, int) {
return Divider(color: Colors.black,);
},
// shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return GridView.count(
shrinkWrap: true,
crossAxisCount: 3,
childAspectRatio: 2.0,
children: List.generate(6, (index) {
return Center(
child: RaisedButton(
onPressed: (){},
color: Colors.greenAccent,
child: Text(
'$index AM',
),
),
);
}),
);
},
itemCount: 4,
));
}
Output:
use CustomScrollView
CustomScrollView(
slivers: List.generate(
10,
(item) => SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 150.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.amber[100 * (index % 9)],
child: Text('grid item $index'),
);
},
childCount: 6,
),
)),
)
import 'package:flutter/material.dart';
class SubmitRequest extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _SubmitRequest();
}
}
class _SubmitRequest extends State<SubmitRequest> {
#override
Widget build(BuildContext context) {
return new Scaffold(
drawer: Drawer(
child: Container(
color: Colors.black54,
child: ListView(
padding: EdgeInsets.only(top: 40.0),
children: <Widget>[
ListTile(
title: Text('Dashboard'),
),
ListTile(
title: Text('Submit Reports'),
),
ListTile(
title: Text('Inbox Requests'),
),
],
),
),
),
appBar: AppBar(
backgroundColor: Colors.blue,
leading: IconButton(icon: Icon(Icons.menu), onPressed: () {}),
actions: <Widget>[
// IconButton(icon: Icon(Icons.search), onPressed: () {}),
IconButton(icon: Icon(Icons.help), onPressed: () {}),
],
bottom: PreferredSize(
child: Padding(
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 15.0, 16.0),
child: Container(
margin: EdgeInsets.only(left: 16.0),
child: TextField(
decoration: new InputDecoration(
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: () {
debugPrint('222');
}),
border: new OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(50.0),
),
),
filled: true,
hintStyle: new TextStyle(color: Colors.grey[800]),
hintText: "Search",
fillColor: Colors.white),
),
),
),
preferredSize: Size(0.0, 80.0),
),
),
body: Scaffold(
body: ListView.builder(
// separatorBuilder: (context, int) {
// return Divider(color: Colors.black,);
// },
// shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return GridView.count(
shrinkWrap: true,
crossAxisCount: 4,
childAspectRatio: 1.0,
children: List.generate(6, (index) {
return GridTile(
child: new Card(
color: Colors.blue.shade100,
child: new Center(
child: new Text('Exterior $index'),
),
),
);
}),
);
},
itemCount: 4,
)
)
);
}
}