I feel like I'm not completely getting persistentFooterButtons. I thought that they'd be part of the safe area, so I can see them when the keyboard is visible. Is there a way to achieve this?
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Persisting test'),
),
body: Center(child: TextFormField()),
persistentFooterButtons: <Widget>[
IconButton(icon: Icon(Icons.map), onPressed: () {}),
IconButton(icon: Icon(Icons.view_week), onPressed: () {}),
],
);
}
You could try using a Stack and an Align widget
return Scaffold(
appBar: AppBar(
title: Text('Persisting test'),
),
body: Center(
child: Stack(
children: <Widget>[
TextFormField(),
Align(
alignment: Alignment.bottomRight,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
IconButton(icon: Icon(Icons.map), onPressed: () {}),
IconButton(icon: Icon(Icons.view_week), onPressed: () {}),
],
),
)
],
)),
);
i hope this may help
Widget bodySection = new Expanded(
child: new Container (
padding: new EdgeInsets.all(8.0),
color: Colors.white70,
child: new TextFormField(
style: const TextStyle(
color: Colors.black,
),
decoration: new InputDecoration(
icon: new Icon(
Icons.lock,
color: Colors.black,
),
border: InputBorder.none,
hintText: "Enter some text here ..",
hintStyle: const TextStyle(color: Colors.black, fontSize: 12.0),
contentPadding: const EdgeInsets.only(
top: 20.0, right: 5.0, bottom: 20.0, left:30.0),
),
),
),
);
Widget fixedBottomSection = new Container (
padding: new EdgeInsets.all(8.0),
color: Colors.purpleAccent[200],
height: 48.0,
child:
new InkWell(
onTap: _continue,
child: new Center(
child: new Text('Next ' , style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
),
)
);
Widget content = new Column(
// This makes each child fill the full width of the screen
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
bodySection,
fixedBottomSection,
],
);
return new Scaffold(
appBar: new AppBar(
// backgroundColor: Colors.purpleAccent[200],
title: new Text("Fixed bottom action bar above keyboard"),
),
body: new Padding(
padding: new EdgeInsets.symmetric(vertical: 0.0, horizontal: 0.0),
child: content,
),
);
here is a prove that it works:
Related
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
I am designing a sign in page in that, I wanted to show my title and subtitle at the bottom of App bar but not finding the proper way
i used this code:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: AppBar(
centerTitle: false,
titleSpacing: 0.0,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black), onPressed: () { },
//onPressed: () => Navigator.of(context).pop(),
),
title: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LOGIN',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
Text(
'Enter your email and passowrd',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
],
),
Result:
Code:
Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () {},
//onPressed: () => Navigator.of(context).pop(),
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(30.0),
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LOGIN',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
Text(
'Enter your email and passowrd',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
),
),
),
),
)
may not be the best solution but will work.
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.grey[100],
),
body: Column(
children: [
Container(
color: Colors.grey[100],
padding: EdgeInsets.only(left: 20,top: 150),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LOGIN',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
Text(
'Enter your email and passowrd',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
),
//over here add your rest of the body content
],
),
);
Try using the answer over here. You can use the bottom property of the AppBar class and use the PreferredSize widget over there.
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
],
),
),
],
),
),
);
}
Facing some difficulties in flutter as I am new to it, how to centerInParent for imageView for flutter? The image is not center, I had use Align but still not working. And how to construct the image and text like this photo ?
appBar: PreferredSize(
preferredSize: Size.fromHeight(45.0),
child: AppBar(
leading: Row(
children: [
Container(
child: GestureDetector(
onTap: () {/* open left menu */},
child: Image.asset("assets/images/ic_title_menu.png", width: 18.0, height: 18.0,)),
padding: EdgeInsets.fromLTRB(14.0, 14.0, 14.0, 14.0),
),
],
),
title: Container(
child: GestureDetector(
onTap: () {/* open search */},
child: Image.asset("assets/images/ic_title_search.png", width: 18.0, height: 18.0,)),
),
actions: <Widget>[
Center(
child: Container(
child: Stack(children: <Widget>[
Align(
alignment: Alignment.center,
child: Image.network(""),)
],),
),
)
],
titleSpacing: 0.0,
automaticallyImplyLeading: false,
),
),
I hope this is something you wanted!
import 'package:flutter/material.dart';
const Color kRed = Colors.red;
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.menu,
color: kRed,
size: 30,
),
SizedBox(width: 10),
Icon(
Icons.search,
color: kRed,
size: 30,
)
],
),
Text(
'Test Text',
style: TextStyle(color: kRed, fontSize: 30),
),
Row(
children: <Widget>[
Column(
children: <Widget>[
Text(
'Test Text',
style: TextStyle(color: kRed, fontSize: 15),
),
Text(
'Test Text',
style: TextStyle(color: kRed, fontSize: 15),
),
],
),
SizedBox(width: 10),
Icon(
Icons.person,
color: kRed,
size: 30,
)
],
)
],
),
),
);
}
}
Just replace the Text Widget in the middle with Image Widget. And tweak with your colors.
App Bar has a property called centerTitle, it will add title on the Appbar center.
centerTitle: true,
Try This
flexibleSpace: Container(
margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
child: Center(
child: Image(
image: AssetImage('assets/img/icon_1.png'),
))),
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),