passing data from screen to drawer flutter - flutter

I want to display the data i have in my dashboard screen to my drawer. My dashboard screen received data from a previous page and i want to pass some of that data to my drawer.
Here is my dashboardscreen
class DashboardScreen extends StatefulWidget {
final AuthUser user;
DashboardScreen({Key key, this.user}) : super(key: key);
#override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
floatingActionButton: buildSpeedDial(),
drawer: CollapsibleDrawer(),
backgroundColor: Color(0xffeee9f1),
body: Container(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
ClipPath(
clipper: DashboardClipper(),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Color(0xff6f3682).withOpacity(.8),
Color(0xff9f44d3).withOpacity(.53),
], begin: Alignment.bottomCenter, end: Alignment.topCenter)),
height: 48 * SizeConfig.heightMultiplier,
),
),
Positioned(
top: 40.0,
child: Container(
padding: EdgeInsets.only(left: 15.0, right: 15.0),
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(Icons.format_align_left,
color: Colors.white),
onPressed: () {
_scaffoldKey.currentState.openDrawer();
},
),
Text(
'My Account',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700),
),
Column(
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.brown.shade800,
child: Text('AH'),
),
],
)
]),
)),
]
)
)
)]
};
My drawer is a stateful widget that looks like this
return Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: Container(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
CustomPaint(
painter: CurvePainter(),
child: DrawerHeader(
child: Row(
children: <Widget>[
CircleAvatar(
radius: 40,
// backgroundImage: AssetImage('assets/images/person.jpg'),
),
SizedBox(
width: 20,
),
Text(
'',
style: textStyle,
)
],
),
),
),
Column(children: <Widget>[]),
ListTile(
title: Text(
'About Us',
style: textStyleTile,
),
trailing: Icon(
Icons.wrap_text,
color: Colors.black,
),
onTap: () {},
),
ListTile(
title: Text(
'SOS',
style: textStyleTile,
),
trailing: Icon(
Icons.help,
color: Colors.black,
),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text(
'Share',
style: textStyleTile,
),
trailing: Icon(
Icons.share,
color: Colors.black,
),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text(
'Settings',
style: textStyleTile,
),
trailing: Icon(
Icons.settings,
color: Colors.black,
),
onTap: () {
// Update the state of the app.
// ...
},
),
SizedBox(
height: MediaQuery.of(context).size.height / 11,
),
Align(
alignment: Alignment.bottomCenter,
child: GestureDetector(
onTap: () => print('tapped'),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Logout',
style: textStyleTile,
),
Icon(
Icons.settings_power,
color: Colors.black,
)
],
),
),
)
],
),
),
);
The opendrawer is opening the drawer from the dashboard screen. How can i display data from my dashboard inside my drawer?

Pass the data to the CollapsibleDrawer constructor. The same as how data is passed to DashboardScreen's constructor.
Change
drawer: CollapsibleDrawer(),
to
drawer: CollapsibleDrawer(user: this.user),

Related

title widget to be centered and icon widgets at the right side in one row

the question is exactly same as this post
but I did not find an answer from the post.
my goal is to set the title widget in the center
and other two buttons on the right side.
the solutions in the link all put the title widget slightly on the left side.
does anyone know how to do this without using Stack? I'm afraid of the title widget being over the button widgets when the title gets too long.
the code:
SizedBox(
height: 40,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
const SizedBox(width: 17),
Text(
'TITLE',
style: const TextStyle(
color: Colors.white, fontSize: 30, fontWeight: FontWeight.w500),
),
Spacer(),
Row(
children: [
GestureDetector(
onTap: (){null;},
child: SizedBox(
child: Icon(Icons.wallet_membership, color: Colors.white),
),
),
const SizedBox(width: 17),
GestureDetector(
onTap: (){Get.toNamed('/wallet_setting');},
child: const SizedBox(
child: Icon(Icons.settings, color: Colors.white),
),
),
]
)
]
),
)
Try this One
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Container(
child: Center(
child: Text(
'TITLE',
style: const TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.w500),
),
)
)
),
Align(
alignment: Alignment.centerRight,
child: Row(
children: [
GestureDetector(
onTap: (){null;},
child: SizedBox(
child: Icon(Icons.wallet_membership, color: Colors.white),
),
),
const SizedBox(width: 17),
GestureDetector(
onTap: (){Get.toNamed('/wallet_setting');},
child: const SizedBox(
child: Icon(Icons.settings, color: Colors.white),
),
),
]
)
)
],
)
OutPut:
i think you should wrap it with centre
Try this approach:
first make widget from your right widgets:
Widget _rightIcons() {
return Row(children: [
GestureDetector(
onTap: () {
null;
},
child: SizedBox(
child: Icon(Icons.wallet_membership, color: Colors.white),
),
),
const SizedBox(width: 17),
GestureDetector(
onTap: () {
Get.toNamed('/wallet_setting');
},
child: const SizedBox(
child: Icon(Icons.settings, color: Colors.white),
),
),
]);
}
then build your header like this:
Row(
children: [
_rightIcons(),
Expanded(
child: Center(
child: Text(
'TITLE',
style: const TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.w500),
),
),
),
Opacity(
opacity: 0,
child: _rightIcons(),
)
],
),
You can use centerTitle:true on Appbar
appBar: AppBar(
centerTitle: true,
title: Text("title"),
actions: [
Another way
Container(
color: Colors.purple,
height: 40 * 2,
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.navigate_before)),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: SizedBox(),
),
Expanded(
flex: 4,
child: Text(
'TITLE',
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.w500),
),
),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
child: Icon(Icons.wallet_membership,
color: Colors.white),
),
const SizedBox(width: 17),
GestureDetector(
onTap: () {},
child: const SizedBox(
child:
Icon(Icons.settings, color: Colors.white),
),
),
]),
),
)
],
),
],
),
)
Preferable solution:
You can implements PreferredSizeWidget to create custom Appbar. Play with color and other decoration.
class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
const MyAppBar({super.key});
#override
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Text("title"),
),
Align(
alignment: Alignment.bottomRight,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
//you can use callback method to get onpressed
onPressed: () {},
icon: Icon(Icons.settings),
),
IconButton(
onPressed: () {},
icon: Icon(Icons.settings),
),
],
),
)
],
);
}
#override
Size get preferredSize => const Size.fromHeight(kToolbarHeight * 2);
}
And use like appBar: MyAppBar(),

icon on pressed function isnt working,whenever i click on any icon,i want to show any action there,what to do?

please help me. when ever I clicked on home icon it does not show any action however I applied on pressed function. icon on pressed function is not working, whenever I click on any icon, I want to show any action there, what to do???. I want to show any action there, what to do???. I want to show any action there, what to do???
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'screen_two.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Screens",
theme: ThemeData(primarySwatch: Colors.red),
home: LocationApp(),
);
}
}
class LocationApp extends StatefulWidget {
#override
_LocationAppState createState() => _LocationAppState();
}
class _LocationAppState extends State<LocationApp> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
maxWidth: MediaQuery.of(context).size.width,
),
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54.withOpacity(0.1),
offset: Offset(15.0, 20.0),
blurRadius: 20.0,
)
],
color: Colors.red.withOpacity(0.8),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(15.0),
child: Icon(
Icons.settings,
color: Colors.white,
),
),
Expanded(
flex: 4,
child: Padding(
padding: const EdgeInsets.only(left: 131.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 70.0, bottom: 30.0),
child: Container(
width: 130.0,
height: 130.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/she.png'),
fit: BoxFit.fill,
),
borderRadius:
BorderRadius.all(Radius.circular(100.0)),
border: Border.all(
color: Colors.white,
width: 4.0,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text(
"Alisa",
style: TextStyle(fontSize: 30.0, color: Colors.white),
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Text(
"22 want | 35 done",
style: TextStyle(fontSize: 17.0, color: Colors.white),
),
),
],
),
),
),
Expanded(
flex: 4,
child: Container(
decoration: BoxDecoration(color: Colors.white),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
children: [
CustomTile(
Icon(
Icons.chat_bubble_outline,
color: Colors.orangeAccent,
),
"Order",
() => {},
""),
CustomTile(
Icon(
Icons.trip_origin_outlined,
color: Colors.pink,
),
"Like",
() => {},
"new"),
CustomTile(
Icon(
Icons.star,
color: Colors.orange,
),
"Comment",
() {},
""),
CustomTile(
Icon(
Icons.android_rounded,
color: Colors.pink,
),
"Download",
() => {},
""),
CustomTile(
Icon(
Icons.zoom_out_sharp,
color: Colors.green,
),
"Edit", () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Secondscreen()));
}, ""),
],
),
),
Container(
height: 70,
color: Colors.black26.withOpacity(0.1),
),
Padding(
padding: const EdgeInsets.only(
top: 0.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(
Icons.add_chart,
),
onPressed: () {},
),
Text('TIPS',
style: TextStyle(
color: Colors.orange, fontSize: 10)),
],
),
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(
Icons.home,
),
onPressed: () {
Scaffold.of(context).openDrawer();
print('Menu Icon pressed');
},
),
Text(
'Home',
style: TextStyle(fontSize: 10),
),
],
),
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(Icons.person,
color: Colors.red),
onPressed: () {},
tooltip: '',
),
Text('Profile',
style: TextStyle(
color: Colors.red, fontSize: 10)),
],
)
],
),
)
],
),
),
)
],
),
),
),
);
}
}
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'screen_two.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Screens",
theme: ThemeData(primarySwatch: Colors.red),
home: LocationApp(),
);
}
}
class LocationApp extends StatefulWidget {
#override
_LocationAppState createState() => _LocationAppState();
}
class _LocationAppState extends State<LocationApp> {
#override
Widget build(BuildContext context) {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
return Scaffold(
key:_scaffoldKey,
body: SingleChildScrollView(
child: Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
maxWidth: MediaQuery.of(context).size.width,
),
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54.withOpacity(0.1),
offset: Offset(15.0, 20.0),
blurRadius: 20.0,
)
],
color: Colors.red.withOpacity(0.8),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(15.0),
child: Icon(
Icons.settings,
color: Colors.white,
),
),
Expanded(
flex: 4,
child: Padding(
padding: const EdgeInsets.only(left: 131.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 70.0, bottom: 30.0),
child: Container(
width: 130.0,
height: 130.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/she.png'),
fit: BoxFit.fill,
),
borderRadius:
BorderRadius.all(Radius.circular(100.0)),
border: Border.all(
color: Colors.white,
width: 4.0,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text(
"Alisa",
style: TextStyle(fontSize: 30.0, color: Colors.white),
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Text(
"22 want | 35 done",
style: TextStyle(fontSize: 17.0, color: Colors.white),
),
),
],
),
),
),
Expanded(
flex: 4,
child: Container(
decoration: BoxDecoration(color: Colors.white),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
children: [
CustomTile(
Icon(
Icons.chat_bubble_outline,
color: Colors.orangeAccent,
),
"Order",
() => {},
""),
CustomTile(
Icon(
Icons.trip_origin_outlined,
color: Colors.pink,
),
"Like",
() => {},
"new"),
CustomTile(
Icon(
Icons.star,
color: Colors.orange,
),
"Comment",
() {},
""),
CustomTile(
Icon(
Icons.android_rounded,
color: Colors.pink,
),
"Download",
() => {},
""),
CustomTile(
Icon(
Icons.zoom_out_sharp,
color: Colors.green,
),
"Edit", () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Secondscreen()));
}, ""),
],
),
),
Container(
height: 70,
color: Colors.black26.withOpacity(0.1),
),
Padding(
padding: const EdgeInsets.only(
top: 0.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(
Icons.add_chart,
),
onPressed: () {},
),
Text('TIPS',
style: TextStyle(
color: Colors.orange, fontSize: 10)),
],
),
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(
Icons.home,
),
onPressed: () {
_scaffoldKey.currentState.openDrawer(),
),print('Menu Icon pressed');
},
),
Text(
'Home',
style: TextStyle(fontSize: 10),
),
],
),
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(Icons.person,
color: Colors.red),
onPressed: () {},
tooltip: '',
),
Text('Profile',
style: TextStyle(
color: Colors.red, fontSize: 10)),
],
)
],
),
)
],
),
),
)
],
),
),
),
);
}
}
Add a scaffold key
Then use the key to open the drawer
First, check if your print msg print on the terminal or log while pressing on IconButton
Like this code,
IconButton(
iconSize: 25.0,
icon: const Icon(Icons.home),
onPressed: () {
print('Menu Icon pressed');
},
),
The below code will help you to Open drawer,
declare and define scaffold key then also define drawer,
I hope the below code will help you, keep Fluttering :)
import 'package:flutter/material.dart';
class OpenDrawer extends StatefulWidget {
const OpenDrawer({Key key}) : super(key: key);
#override
_OpenDrawerState createState() => _OpenDrawerState();
}
class _OpenDrawerState extends State<OpenDrawer> {
GlobalKey<ScaffoldState> globalKey = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
key: globalKey,
drawer: Drawer(child: YourDrawerWidget()),
body: Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(
Icons.home,
),
onPressed: () {
globalKey.currentState.openDrawer();
print('Menu Icon pressed');
},
),
Text(
'Home',
style: TextStyle(fontSize: 10),
),
],
),
);
}
}

How to change the whole background color of Drawer in Flutter

first of all i'm new to flutter and so i am quite confused how to change the "whole" background color in drawer flutter.
i managed to change my ListTile and my so called DrawerHeader to the color i want but the rest (below the ListTile is all white). And there is a line below the DrawerHeader that i don't really want but i can't get rid of it.
here is the code
import 'package:flutter/material.dart';
import '../style/theme.dart' as style;
class MyDrawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
// width: MediaQuery.of(context).,
child: Drawer(
elevation: 0,
child: ListView(
children: <Widget>[
Container(
height: 170,
width: 170,
padding: EdgeInsets.only(top:30),
color: style.Colors.secondColor,
child: Column(children: <Widget>[
Material(
borderRadius: BorderRadius.all(Radius.circular(100)),
child: Padding(padding: EdgeInsets.all(20.0),
child: Image.asset('images/circle.png',width: 80, height: 80,),),
//TODO ganti logo
),
],),
),
Container(
color: style.Colors.secondColor,
child: Column(
children: <Widget>[
ListTile(
leading: Icon(Icons.help_outline_sharp),
title: Text('Help', style: TextStyle(fontSize: 18,),),
onTap: () {},
),
ListTile(
leading: Icon(Icons.person),
title: Text('About us', style: TextStyle(fontSize: 18,),),
onTap: () {},
),
],
),
),
],
),
),
);
}
}
here is the photo of the current situation
Here is the photo
Another Question
what if i want to put a single ListTile on the bottom? (like log out)
For changing the background color of drawer you can just swap the Drawer Widget with Container and give color to container
class MyDrawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Drawer(
elevation: 0,
child: Container(
color: Colors.blue,
child: ListView(
children: <Widget>[
Container(
height: 170,
width: 170,
padding: EdgeInsets.only(top:30),
color: Colors.red,
child: Column(children: <Widget>[
Material(
borderRadius: BorderRadius.all(Radius.circular(100)),
child: Padding(padding: EdgeInsets.all(20.0),
child: Image.asset('images/circle.png',width: 80, height: 80,),),
),
],),
),
Container(
color: Colors.red,
child: Column(
children: <Widget>[
ListTile(
leading: Icon(Icons.help_outline_sharp),
title: Text('Help', style: TextStyle(fontSize: 18,),),
onTap: () {},
),
ListTile(
leading: Icon(Icons.person),
title: Text('About us', style: TextStyle(fontSize: 18,),),
onTap: () {},
),
],
),
),
],
),
),
);
}
}
This can be the final code you can use, it has answer to all your three questions
class MyDrawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
children: <Widget>[
Container(
height: 170,
width: 170,
padding: EdgeInsets.only(top:30),
color: Colors.blue,
child: Column(children: <Widget>[
Material(
borderRadius: BorderRadius.all(Radius.circular(100)),
child: Padding(padding: EdgeInsets.all(20.0),
child: Image.asset('images/circle.png',width: 80, height: 80,),),
),
],
),
),
ListTile(
leading: Icon(Icons.help_outline_sharp),
title: Text('Help', style: TextStyle(fontSize: 18,),),
onTap: () {},
),
ListTile(
leading: Icon(Icons.person),
title: Text('About us', style: TextStyle(fontSize: 18,),),
onTap: () {},
),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: ListTile(
leading: Icon(Icons.logout),
title: Text('Logout')
),
),
],
),
);
}
}
To change the color, wrap the Drawer widget in a Theme widget as follows:
Scaffold(
drawer:Theme(
data:Theme.of(context).copyWith(
canvasColor://the desired color will go here
),
child:Drawer(/*drawer content*/)
)
)
Hope this is useful for someone

How to display TabBar in bottom of a widget

Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
color:Colors.blueGrey.shade900,
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.15,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text("Available Balance ₹ 10050", style: TextStyle(
color: Colors.white,
fontSize: 18,
),),
],),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
RaisedButton(onPressed: () {}, color: Colors.teal, child: Text("Recharge", style: TextStyle(
color: Colors.white
),),),
RaisedButton(onPressed: () {}, color: Colors.teal, child: Text("Read Rule", style: TextStyle(
color: Colors.white
),),),
Icon(Icons.refresh_rounded, color: Colors.white,)
],),
),
SizedBox(
height: 5,
),
// I need to insert the tabBarHere
],
),
),
],
),
),
);
I have created the widget from flutter but i am not able to display the TabBar after this Widget. I have seen the basic method to create the tabs using DefaultTabController() but it is working when we are using in the bottom of the appbar
You can use a NestedScrollView:
Scaffold(
body: SafeArea(
child: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxScrolled) {
return <Widget>[
SliverToBoxAdapter(
child: Container(
color: Colors.blueGrey.shade900,
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.15,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"Available Balance ₹ 10050",
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
RaisedButton(
onPressed: () {},
color: Colors.teal,
child: Text(
"Recharge",
style: TextStyle(color: Colors.white),
),
),
RaisedButton(
onPressed: () {},
color: Colors.teal,
child: Text(
"Read Rule",
style: TextStyle(color: Colors.white),
),
),
Icon(
Icons.refresh,
color: Colors.white,
)
],
),
),
SizedBox(
height: 5,
),
],
),
),
),
SliverToBoxAdapter(
child: Container(
color: Colors.blueGrey.shade900,
child: TabBar(
tabs: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Icon(Icons.card_giftcard),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Icon(Icons.store),
),
],
),
),
),
];
},
body: Column(
children: <Widget>[
Flexible(
child: TabBarView(
children: [
Center(child: Text('tab 1')),
Center(child: Text('tab 2')),
],
),
),
],
),
),
),
)
)
Result:
you can use bottomNavigationBar
class _MyHomePageState extends State<MyHomePage> {
var selectedIndex = 0;
void onItemTapped(int index) {
setState(() {
selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("data"),
backgroundColor: Colors.blueGrey.shade900,
actions: <Widget>[Icon(Icons.notifications)],
),
drawer: Drawer(),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.amber,
elevation: 12.0,
type: BottomNavigationBarType.shifting,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.store), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.warning), title: Text('Warning')),
],
showUnselectedLabels: true,
currentIndex: selectedIndex,
unselectedItemColor: Colors.white,
fixedColor: Colors.teal,
onTap: onItemTapped,
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
color: Colors.blueGrey.shade900,
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.15,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"Available Balance ₹ 10050",
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
RaisedButton(
onPressed: () {},
color: Colors.teal,
child: Text(
"Recharge",
style: TextStyle(color: Colors.white),
),
),
RaisedButton(
onPressed: () {},
color: Colors.teal,
child: Text(
"Read Rule",
style: TextStyle(color: Colors.white),
),
),
Icon(
Icons.refresh,
color: Colors.white,
)
],
),
),
SizedBox(
height: 5,
),
// I need to insert the tabBarHere
],
),
),
],
),
),
);
}

Layout in list tile - flutter

Current output:
Expected output:
Code:
SizedBox(
width: 380,
height: 180,
child: Swiper(
itemCount: items.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Expanded(
child: Card(
child: ListTile(
title: Text(
'${items[index].title}',
),
subtitle: Text(
'${items[index].body}',
),
trailing: Column(
children: <Widget>[
CircleAvatar(
backgroundColor: HexColor("#0087a8"),
child: IconButton(
icon: Icon(Icons.add),
],
),
),
),
)
],
);
},
viewportFraction: 0.8,
scale: 0.9,
control: SwiperControl(color: Colors.white),
),
);
I am unable to create the icon button to be that way. As when i put in padding, it says that the pixels overflowed. I need to get the add button on the bottom right hand side.
As already pointed out, you shouldn't use a ListTile for this, as you want to use more than just a title, subtitle for your content.
The reason I've picked a Stack over a Column here, is that it allows you to safely use it in different size screens whilst assuring the view won't overflow. With Column, it would use the button diameter as the whole space to use (vertically), even though it is restrict to the right side of the box.
I believe this is what you're looking for.
class MyListTile extends StatelessWidget {
const MyListTile({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 180.0,
color: const Color(0xff0087a8),
child: Container(
padding: const EdgeInsets.all(20.0),
margin: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
color: const Color.fromRGBO(19, 12, 117, 1.0),
),
child: Stack(
children: <Widget>[
Text(
'EUR - USD',
style: Theme.of(context).textTheme.display2.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Forex',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
backgroundColor: const Color(0xff0087a8),
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
size: 50.0,
),
),
)
],
),
),
);
}
}
Try this code
Container(
height: 180,
width: double.infinity,
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'EUR/USD',
style: TextStyle(fontSize: 40),
),
Text('FOREX', style: TextStyle(fontSize: 20)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.blueAccent,
child: IconButton(
onPressed: () {
print('On Pressed');
},
icon: Icon(Icons.add),
)),
],
)
],
),
),
),
)
Use custom widget for list item OR column from below code for single view. To align left and right you have to put your view in 'Align' as in below -
class _ItemsState extends State<Items> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: SizedBox(
width: 380,
height: 160,
child: Card(
child: ListView.builder(
itemCount: 1,
itemBuilder: (context, index) {
return
Padding(padding: EdgeInsets.all(10.0),child: Column(children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Column(children: <Widget>[
Text(
'title',
style: TextStyle(fontSize: 20.0 , fontWeight: FontWeight.bold,),
),
Text(
'body',
style: TextStyle(fontSize: 14.0), )
]),
),
Align(
alignment: Alignment.centerRight,
child: CircleAvatar(
maxRadius: 20.0,
backgroundColor: Colors.blueGrey,
child: IconButton(
icon: Icon(Icons.add,
color: Colors.white,),
))
)
]));
}))));
}
}