How I can make side bar upon button to add the coin.
you can achieve that by using the Dismissible widget
here's a video on how to use it
https://www.youtube.com/watch?v=iEMgjrfuc58
Use This Package:
flutter_slidable: ^2.0.0
Scaffold(
body: ListView(
children: [
Slidable(
// Specify a key if the Slidable is dismissible.
key: const ValueKey(0),
// The start action pane is the one at the left or the top side.
startActionPane: ActionPane(
// A motion is a widget used to control how the pane animates.
motion: const ScrollMotion(),
// A pane can dismiss the Slidable.
dismissible: DismissiblePane(onDismissed: () {}),
// All actions are defined in the children parameter.
children: const [
// A SlidableAction can have an icon and/or a label.
SlidableAction(
onPressed: doNothing,
backgroundColor: Color(0xFFFE4A49),
foregroundColor: Colors.white,
icon: Icons.delete,
label: 'Delete',
),
SlidableAction(
onPressed: doNothing,
backgroundColor: Color(0xFF21B7CA),
foregroundColor: Colors.white,
icon: Icons.share,
label: 'Share',
),
],
),
// The end action pane is the one at the right or the bottom side.
endActionPane: const ActionPane(
motion: ScrollMotion(),
children: [
SlidableAction(
// An action can be bigger than the others.
flex: 2,
onPressed: doNothing,
backgroundColor: Color(0xFF7BC043),
foregroundColor: Colors.white,
icon: Icons.archive,
label: 'Archive',
),
SlidableAction(
onPressed: doNothing,
backgroundColor: Color(0xFF0392CF),
foregroundColor: Colors.white,
icon: Icons.save,
label: 'Save',
),
],
),
// The child of the Slidable is what the user sees when the
// component is not dragged.
child: const ListTile(title: Text('Slide me')),
),
Slidable(
// Specify a key if the Slidable is dismissible.
key: const ValueKey(1),
// The start action pane is the one at the left or the top side.
startActionPane: const ActionPane(
// A motion is a widget used to control how the pane animates.
motion: ScrollMotion(),
// All actions are defined in the children parameter.
children: [
// A SlidableAction can have an icon and/or a label.
SlidableAction(
onPressed: doNothing,
backgroundColor: Color(0xFFFE4A49),
foregroundColor: Colors.white,
icon: Icons.delete,
label: 'Delete',
),
SlidableAction(
onPressed: doNothing,
backgroundColor: Color(0xFF21B7CA),
foregroundColor: Colors.white,
icon: Icons.share,
label: 'Share',
),
],
),
// The end action pane is the one at the right or the bottom side.
endActionPane: ActionPane(
motion: const ScrollMotion(),
dismissible: DismissiblePane(onDismissed: () {}),
children: const [
SlidableAction(
// An action can be bigger than the others.
flex: 2,
onPressed: doNothing,
backgroundColor: Color(0xFF7BC043),
foregroundColor: Colors.white,
icon: Icons.archive,
label: 'Archive',
),
SlidableAction(
onPressed: doNothing,
backgroundColor: Color(0xFF0392CF),
foregroundColor: Colors.white,
icon: Icons.save,
label: 'Save',
),
],
),
// The child of the Slidable is what the user sees when the
// component is not dragged.
child: const ListTile(title: Text('Slide me')),
),
],
),
),
);
Related
I'm trying to build a list that when the user swipes the list item from left to right a slidable pan shows up and when the user swipes from right to left, the list item text style changes (adding an underline and changing color).
I can't combine these two functionalities.
I've tried to combine dissmisable with slidable but somhow dissmisable overrides slidable.
Just Slidable code (works good):
ListView(
children: [
Slidable(
key: const ValueKey(0),
endActionPane: ActionPane(
extentRatio: 0.25,
motion: const StretchMotion(),
children: [
SlidableAction(
onPressed: (context) {},
foregroundColor: Colors.black,
icon: Icons.edit,
),
SlidableAction(
onPressed: (context) {},
foregroundColor: Colors.red,
icon: Icons.delete,
),
],
),
child: const ListTile(
title: Text('Sample Task'),
),
),
],
),
Slidable + Dismissable (doesn't behave ok):
ListView(
children: [
Slidable(
key: const ValueKey(0),
endActionPane: ActionPane(
extentRatio: 0.25,
motion: const StretchMotion(),
children: [
SlidableAction(
onPressed: (context) {},
foregroundColor: Colors.black,
icon: Icons.edit,
),
SlidableAction(
onPressed: (context) {},
foregroundColor: Colors.red,
icon: Icons.delete,
),
],
),
child: Dismissible(
key: const ValueKey(0),
child: const ListTile(
title: Text('Sample Task'),
),
),
),
],
),
GestureDetector(
onHorizontalDragUpdate: (details) {
int sensitivity = 10;
if (details.delta.dx > sensitivity) {
setState(() {
result = "swiped right direction";
});
} else if (details.delta.dx < -sensitivity) {
setState(() {
result = "swiped left direction";
});
}
},
child: const ListTile(
title: Text('Sample Task'),
),
),
you can write these codes.
I am trying to implement the below design
When I add the expandable floating button to the notch in bottom navigation bar it break the design of bottom navigation bar.
I tried AnchorOverlay but didn't help. Below is the code of my main screen where the expandable widget is notched in the bottom app bar
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kPrimaryColor,
floatingActionButton: ExpandableFab(
distance: 112.0,
children: [
ActionButton(
onPressed: () {},
icon: const Icon(Icons.format_size),
),
ActionButton(
onPressed: () {},
icon: const Icon(Icons.insert_photo),
),
ActionButton(
onPressed: () {},
icon: const Icon(Icons.videocam),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
//bottom navigation bar on scaffold
color: Colors.redAccent,
shape: const CircularNotchedRectangle(), //shape of notch
notchMargin:
5, //notche margin between floating button and bottom appbar
child: Row(
//children inside bottom appbar
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: const Icon(
Icons.menu,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.print,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.people,
color: Colors.white,
),
onPressed: () {},
),
],
),
),
);
}
Please refer this https://codewithandrea.com/articles/adding-animated-overlays-to-your-app/ maybe your issue will fixed.
I have a convex bottom bar and the last tab is a Menu that opens a drawer when clicked. But I'm having troubles when the drawer is closed. As the tab Menu only opens a drawer I wish it could return to previous tab when drawer closes, but the Menu tab keeps active. The tab only changes when it is clicked. So how can I call the onTab property of convex_tab_bar when the drawer is closed?
...
return Scaffold(
key: _scaffoldKey,
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: const Text('Item 1'),
onTap: () {},
),
],
),
),
onDrawerChanged: (isOpen) {
if (!isOpen) {
setState(() {
_currentOption = _previousOption;
});
changeTab(context, _previousOption);
}
},
body: Container(
child: _currentPage,
),
bottomNavigationBar: StyleProvider(
style: Style(),
child: ConvexAppBar(
style: TabStyle.fixedCircle,
backgroundColor: Colors.white,
color: Colors.grey,
activeColor: _currentOption == 1
? const Color(0xffa98e47)
: const Color(0xff00c9ff),
items: [
TabItem(
icon: const Icon(
ReceivedIcon.receivedIcon,
color: Colors.grey,
size: 12,
),
title: AppLocalizations.of(context)!.received,
activeIcon: const Icon(
ReceivedIcon.receivedIcon,
color: Color(0xff00c9ff),
size: 12,
),
),
TabItem(
icon: const Icon(SentIcon.sentIcon, color: Colors.grey),
title: AppLocalizations.of(context)!.sent,
activeIcon: const Icon(SentIcon.sentIcon, color: Color(0xffa98e47)),
),
const TabItem(
icon: Icon(
Icons.add_rounded,
size: 48,
color: Colors.white,
)
),
TabItem(
icon: Icons.notifications,
title: AppLocalizations.of(context)!.notifications
),
TabItem(
icon: Icons.menu,
title: AppLocalizations.of(context)!.menu
),
],
onTap: (int i) {
changeTab(context, i);
},
),
),
);
try this https://github.com/hacktons/convex_bottom_bar/blob/master/doc/issue-change-active-tab-index.md (Change active tab index programmaticlly)
create a function onTapHandler in your class ... put the referece on your ConvexAppBar(onTap:onTapHandler ...) and now you are able to call the onTapHandler in your onDrawerChanged handler
Is there an existing speed dial widget that would work with regular buttons or any onclick event? I have found this widget which works great with the FloatingActionButton, but I need something that would work with an IconButton or RaisedButton. I tried using the SpeedDial Widget inside of a container, like so:
Container(
child: SpeedDial(
overlayOpacity: 0.2,
animatedIcon: AnimatedIcons.menu_close,
children: [
SpeedDialChild(
child: Icon(Icons.ac_unit),
label: 'Second',
onTap: () => print('SECOND'),
),
SpeedDialChild(
child: Icon(Icons.accessibility),
backgroundColor: Colors.red,
label: 'First',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('FIRST'),
),
],
),
),
But no luck, unfortunately. I get an infinity pixels on the right.
Please use padding in right and bottom side. Check the below code. You need to set a TextStyle for Text, you also need to use manual height and width for your child.
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 20, 20),
child: Container(
child: SpeedDial(
overlayOpacity: 0.2,
animatedIcon: AnimatedIcons.menu_close,
children: [
SpeedDialChild(
child: Icon(Icons.ac_unit),
label: 'Second',
onTap: () => print('SECOND'),
),
SpeedDialChild(
child: Icon(Icons.accessibility),
backgroundColor: Colors.red,
label: 'First',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('FIRST'),
),
],
),
),
)
How can I reduce spacing between button ?
You can see four buttons on app bar takes so much space, I have tried Rows. but not worked
Below is my code --
AppBar(
backgroundColor: Colors.deepOrange,
iconTheme: new IconThemeData(color: Colors.white),
title: Text(
titleString,
style: TextStyle(color: Colors.white),
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
//iconSize: 20,
onPressed: null,
),
IconButton(
icon: Icon(
Icons.notifications_none,
color: Colors.white,
),
// iconSize: 20,
onPressed: null,
),
//Add more icon here
],
);
You can use VisualDensity and padding arguments together to reduce things:
actions: <Widget>[
IconButton(
visualDensity: VisualDensity(horizontal: -4.0, vertical: -4.0),
padding: EdgeInsets.zero,
icon: Icon(
Icons.search,
color: Colors.white,
),
//iconSize: 20,
onPressed: null,
),
//Add more icon here
],
This worked in my app at least. Hope it's helpful!
The problem is with the IconButton Widget. by default IconButton has a size of 48x48 pixels size and you can read about it in the top answer of this question.
A workaround would be to use the GestureDetector widget to handle your onPressed() method. Below is an example.
actions: <Widget>[
GestureDetector(
onTap: (){
//your code
},
child: Icon(Icons.search)
),
GestureDetector(
onTap: (){},
child: Icon(Icons.notifications)
)
//Add more icon here
],
Try using sizedbox
Example
Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox.fromSize(
size: Size(25, 20), // button width and height
child: InkWell(
splashColor: Colors.white, // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.search), // icon
],
),
),
),
),