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: () {},
),
),
),
);
},
),
)
]);
Related
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->
I want that Cancellation charges and the bottom button remains fixed on screen, while the Choose Seat(s) and passengers should be scrollable. But, whenever I am trying to insert any widget after singlechildscrollview, it is not appearing at the bottom.
As, my column has 3 widgets, a row, singlechildscrollview and button, so my button and top row should remain there and remaining seats and passengers should be scrollable, but I am not able to see the bottom button, while my row working fine, remaining there.
Code -
showCancellationCharges(BuildContext? context) {
final DateTime currentDate = DateTime.now();
if (ticketData!.data!.booking!.boarding!.eta! >
currentDate.millisecondsSinceEpoch)
showModalBottomSheet(
backgroundColor: Colors.white,
context: context!,
builder: (context) => Wrap(
children: [
StatefulBuilder(
builder: (context, stateSetter) => Padding(
padding: MediaQuery.of(context).viewInsets,
child: Container(
//height: MediaQuery.of(context).size.height*0.7,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(top: 5.0, bottom: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Cancellation Charges',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
)
),
IconButton(
icon: Icon(
Icons.close,
color: colorPrimary,
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
),
Container(
height: MediaQuery.of(context).size.height*0.5,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Choose Seat(s)',
style: TextStyle(color: popUpLightTextColor),
),
),
Column(
children: List.generate(
ticketData!.data!.booking!.seats!.length,
(index) => CancellationItem(
checkBoxState: ticketData!.data!.booking!
.seats![index].selected,
checkBox: (v) => stateSetter(() {
print('seat at index $index $v');
if (v)
totalSeatToCancel++;
else
totalSeatToCancel--;
ticketData!.data!.booking!.seats![index]
.selected = v;
}),
// checkBoxState: data[index.],
imagePath:
'assets/icons/ticket_seat_icon.svg',
title: ticketData!
.data!.booking!.seats![index].code,
)),
),
// CancellationSeatItems(
// data: ticketData.data.booking.seats,
// ),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Choose Passenger(s)',
style: TextStyle(color: popUpLightTextColor),
),
),
Column(
children: List.generate(
ticketData!.data!.booking!.passengers!.length,
(index) => CancellationItem(
checkBoxState: ticketData!.data!.booking!
.passengers![index].selected,
checkBox: (v) => stateSetter(() {
if (v)
totalPassengerToCancel++;
else
totalPassengerToCancel--;
print('passenger at index $index $v');
ticketData!.data!.booking!
.passengers![index].selected = v;
}),
imagePath: (ticketData!.data!.booking!
.passengers![index].gender ==
'MALE')
? 'assets/icons/male_icon.svg'
: 'assets/icons/female_icon.svg',
title: ticketData!.data!.booking!
.passengers![index].name,
)),
),
],
),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Container(
child: ValueListenableBuilder(
valueListenable: isCalculating,
builder: (BuildContext context, bool val, Widget? child) {
return FlatButton(
height: 44,
minWidth: MediaQuery.of(context).size.width,
color: val ? Colors.grey : colorPrimary,
onPressed: () => calculateItem(),
child: Text(
val ? 'Calculating...' : 'Calculate',
style: TextStyle(
color: Colors.white,
fontSize: 16
),
),
);
},
),
),
),
// CancellationPassengerItems(
// data: ticketData.data.booking.passengers,
// ),
],
),
),
),
),
),
],
));
else
_snackbarService.showSnackbar(
message: 'Sorry, ticket can not be cancelled');
}
Actually I solved the problem. I just used isScrollControlled: true, parameter for showModalBottomSheet and it's done.
you may put the listview inside a container with a height
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(...)
)
I'm trying to build out a custom dropdown menu that looks like this:
I've managed to implement the ListTiles and Row of Buttons without the dropdown, but I'm not sure how to nest all of that within a dropdown menu class. This is what I've got so far:
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(),
body: SizedBox.expand(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[0]),
title: Text('All Circles'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[1]),
title: Text('Pickup'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[2]),
title: Text('Kappa Delta'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[3]),
title: Text('Ok Boomer'),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("Join a Circle"),
color: Color(0xffb74093),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
RaisedButton(
child: Text("Create a Circle"),
color: Colors.red,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
],
),
],
),
),
),
);
}
}
I'm not sure you can use ListTile after the items: directly.
If you did run the code above, you're getting errors.
it needs to return DropdownMenuItem instead of ListTile directly
return DropdownMenuItem<String>(
value: value,
child: Row(
children: <Widget>[
CircleAvatar(backgroundColor: Colors.primaries[3]),
Text(value)
],
));
I think the above code would be relatively correct.
this is very simple first create a drop-down menu widget and then give your widget to a drop-down menu item
like this
give value to each drop-down item according to your objects array
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(
color: Colors.deepPurple
),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[0]),
title: Text(value),
);
})
.toList(),
);
I need an AlertDialog with minHeight of 50. It contains a ListView. If the ListView exceeds the screen it should become scrollable. But I can't scroll for some reason. Can anyone explain to me why it's not working :)
AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
title: ... ,
content: ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 50,
),
child: Column(
children: <Widget>[
Row(...),
Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: list.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () => _onTap(list[index]),
child: Row(
children: <Widget>[
Flexible(
flex: 1,
child: Checkbox(...),
),
Flexible(
flex: 3,
child: Text(list[index]),)
],
)
);
},
)
)
],
),
),
actions: <Widget>[
MaterialButton(
minWidth:100,
child: Text('Cancel'),
onPressed: (){
Navigator.of(context).pop();
}
),
MaterialButton(
minWidth:100,
elevation: 5.0,
color: Theme.of(context).accentColor,
child: Text('Save', style: TextStyle(color: Color(0xFFF6F5F5))),
onPressed: (){
}
)
],
);
Add mainAxisSize: MainAxisSize.min to your Column. Without it, your Column is at infinite height and contains all Listview items. That's why it does not scroll.