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'),
))),
Related
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(),
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.
I want to add a button in the right side of the card,by default the button's color should be green and while tapping on it, there should be a popup box opened and the color of the button would turn to red.
1-The button's color should be green while the listView willed be plotted.
2-Then when I am tapping on the button, a dialog box should be opened with a input textField.
3-After I am inserting any text and pressing the submit button of the popup box, the entered text will be printed on the console.
4-Then the color of the button would turn to red from green.
As I am new to flutter, please help me to get this.
Here is my Code:
body: ListView.builder(
itemCount: patients.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(9.0),
child: SizedBox(
height: 120,
child: Card(
elevation: 5.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Row(
children: [
Expanded(
flex: 3,
child: Container(
child: CircleAvatar(
backgroundImage: NetworkImage(patients[index].imgPath),
radius: 50.0,
),
),
),
Expanded(
flex: 5,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(patients[index].name, style: TextStyle(
fontSize: 23.0,
fontWeight: FontWeight.bold,
color: Colors.black87
),),
SizedBox(
height: 20,
),
Text(patients[index].completedSession.toString() +'/'+ patients[index].totalSession.toString(),
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.black54
),),
],
),
),
),
Expanded(
flex: 2,
child: Container(
child: RaisedButton(
),
),
),
],
),
),
),
),
),
);
},
),
You should use CrossAxisAlignment.stretch for your Row:
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: MyWidget(),
),
),
);
}
class MyWidget extends HookWidget {
#override
Widget build(BuildContext context) {
final pushed = useState(false);
return AspectRatio(
aspectRatio: 3,
child: Card(
elevation: 5.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
CircleAvatar(
backgroundImage: NetworkImage(
'https://upload.wikimedia.org/wikipedia/commons/5/54/RowanAtkinsonMar07.jpg',
),
radius: 50.0,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Mister B.',
style: TextStyle(
fontSize: 23.0,
fontWeight: FontWeight.bold,
color: Colors.black87),
),
SizedBox(
height: 20,
),
Text(
'0/42',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
],
),
),
RaisedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
pushed.value ? 'Button unpushed' : 'Button pushed'),
),
);
pushed.value = !pushed.value;
},
color: pushed.value ? Colors.red : Colors.green,
child: Text('OK'),
),
],
),
),
),
);
}
}
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
],
),
),
],
),
),
);
}
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),