What am I doing wrong? I can't get the border radius of my card to change. The elevation isn't working either. I'm new at this. What do I need to change? Is it because it's in ListView? I'm confused. If you need for information, just ask. Sorry it wants me to write more... too much code?
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(85),
child: AppBar(
backgroundColor: Color(),
bottom: TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.people), text: (''),),
Tab(icon: Icon(Icons.person), text: (''),),
Tab(icon: Icon(Icons.circle), text: (''),),
],
),
),
),
body: ListView(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Container(
color: Colors.white,
height: 120,
child: Column(
children: <Widget>[
ListTile(
leading: CircleAvatar(backgroundImage:
NetworkImage(''),backgroundColor: Color(),),
title: Text('', style: TextStyle(color: Color ()),
subtitle: Text(
'', style: TextStyle(color: Color()),),),
Divider(
height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.add, color: Color()),
SizedBox(width: 8.0),
Text('', style: TextStyle(color: Color()),
),
],
),
Row(
children: <Widget>[
Icon(Icons.comment, color: Color()),
SizedBox(width: 8.0),
Text('', style: TextStyle(color: Color())),
],
),
Row(
children: <Widget>[
Icon(Icons.bookmark, color: Color()),
SizedBox(width: 8.0),
Text('', style: TextStyle(color: Color()),),
],
),
],
),
SizedBox(height: 12.0,),
I believe the problem is caused by the child container in the card widget. The container is overlapping over the cards borders so it covers the border radius and the elevation. Try putting the container as the parent of the card and see it that helps. Additionally,you could set the containers decorations property to have the same border radius as the card so it does not overlap.
Related
Edit: This error only happen in Xioami Redmi Note 7 (Android version 10), work perfectly on other device like samsaung (Android version 13).
Edit: I reproduced again. I found this happen when pop back to drawer from drawer navigation.
(Eg: Go to notification screen from drawer navigation stack and pop back).
I found an issue with the flutter drawer while implementing UI.
Please see below image. Drawer header exceed a white margin that I except. But that exceed margin not always happen every time although I reproduce by opening drawer again and again. It only happen in usual when not expected. What is happen and how to fix?
I test this with only in debug mode.
DrawerHeader(
decoration: BoxDecoration(
color: primaryColor,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const FlutterLogo(
size: largeIconSize,
),
const SizedBox(
width: 70,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LA PYAE TEST',
style: Theme.of(context).textTheme.headline5,
),
Text(
'09500007958',
style: Theme.of(context).textTheme.headline5?.copyWith(
fontSize: textRegular2X,
),
),
Text(
'Balance: 0 MMK',
style: Theme.of(context).textTheme.headline5?.copyWith(
fontSize: textRegular,
),
),
],
),
],
),
),
Edit
here is my Drawer body completely ,
Drawer(
child: ListView(
children: [
/// TODO Bind data
DrawerHeader(
decoration: BoxDecoration(
color: primaryColor,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const FlutterLogo(
size: largeIconSize,
),
const SizedBox(
width: 70,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LA PYAE TEST',
style: Theme.of(context).textTheme.headline5,
),
Text(
'09500007958',
style: Theme.of(context).textTheme.headline5?.copyWith(
fontSize: textRegular2X,
),
),
Text(
'Balance: 0 MMK',
style: Theme.of(context).textTheme.headline5?.copyWith(
fontSize: textRegular,
),
),
],
),
],
),
),
ListTile(
onTap: () {
Navigator.pushNamed(context, notificationRoute);
},
leading: const Icon(
Icons.notifications_none_outlined,
size: 30,
),
title: const Text(NOTIFICATION),
),
const ListTile(
leading: Icon(
Icons.settings_outlined,
size: 30,
),
title: Text(APP_SETTING),
),
const ListTile(
leading: Icon(
Icons.location_on_outlined,
size: 30,
),
title: Text(LOCATIONS),
),
const ListTile(
leading: Icon(
Icons.question_mark_outlined,
size: 30,
),
title: Text(ABOUT),
),
const ListTile(
leading: Icon(
Icons.logout_outlined,
size: 30,
),
title: Text(LOG_OUT),
),
const ListTile(
leading: Icon(
Icons.share,
size: 30,
),
title: Text(SHARE_APP),
),
],
),
);
add
padding: EdgeInsets.zero,
to drawer header widget
Hi i am new in flutter and i am facing this error
A RenderFlex overflowed by 9.0 pixels on the right.
The relevant error-causing widget was Row
this is my code down below:
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0.0,
iconTheme: IconThemeData(
color: Colors.grey[600],
),
leading: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: GestureDetector(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.arrow_back_ios_outlined,
),
Text(
'Back',
style: GoogleFonts.poppins(
color: Colors.grey[600],
fontSize: 20
),
),
],
),
And here is screenshot from my device emulator
Can you help me please how to fix this error?
Wrapping the Icon with an Expanded widget will get rid of the error here.
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0.0,
iconTheme: IconThemeData(
color: Colors.grey[600],
),
leading: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: GestureDetector(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Icon(
Icons.arrow_back_ios_outlined,
),
),
Text(
'Back',
style: GoogleFonts.poppins(
color: Colors.grey[600], fontSize: 20),
),
],
),
),
),
),
);
Does this solve your problem?
I tried add leadingWidth with value 100 to AppBar and that fixed my problem
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 am trying to align the Top AppBar Actions to the left but I failed
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
titleSpacing: 0.0,
elevation: 5.0,
backgroundColor: Color(0xff201F23),
title: Icon(
Icons.polymer,
color: Colors.orange,
size: 30.0,
),
actions: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 8, 10, 8),
child: CircleAvatar(
backgroundImage: ExactAssetImage('assets/Bronze.jpg'),
),
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.orange,
width: 1.0,
),
borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
)),
Container(
//margin: EdgeInsets.fromLTRB(0, 0, 130, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
'Ov3rControl',
style: TextStyle(fontSize: 12.0),
),
),
SizedBox(height: 4.0),
Row(
children: <Widget>[
Icon(
Icons.trip_origin,
color: Colors.orange,
size: 12.0,
),
SizedBox(width: 4.0),
Text('1000', style: TextStyle(fontSize: 12.0))
],
),
]),
)
],
),
drawer: Drawer());
}
I want the items to be next to the Logo. how can I achieve that?
I Tried putting left margin to the container but the design break when the name of the user gets bigger
Also, I am new to flutter is there is any way to make this code better?
Is this what you are looking for?
Find the changes in the code below:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
titleSpacing: 0.0,
elevation: 5.0,
backgroundColor: Color(0xff201F23),
title: Row(
children: <Widget>[
Icon(
Icons.polymer,
color: Colors.orange,
size: 30.0,
),
SizedBox(width: 15,),
Container(
margin: EdgeInsets.fromLTRB(0, 8, 10, 8),
child: CircleAvatar(
backgroundImage: ExactAssetImage('assets/Bronze.jpg'),
),
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.orange,
width: 1.0,
),
borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
)),
Container(
//margin: EdgeInsets.fromLTRB(0, 0, 130, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
'Ov3rControl',
style: TextStyle(fontSize: 12.0),
),
),
SizedBox(height: 4.0),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.trip_origin,
color: Colors.orange,
size: 12.0,
),
SizedBox(width: 4.0),
Text('1000', style: TextStyle(fontSize: 12.0))
],
),
]
),
)
],
),
),
drawer: Drawer()
);
}
You can also use the leading property in the AppBar and pass your widget to it
leading: IconButton(
icon: Icon(Icons.shopping_cart),
tooltip: 'Open shopping cart',
onPressed: () {
// handle the press
},
),
I want to push the flatbutton.icon near bottom but not in bottomNavigationBar.
I want also to make it dynamic so that i can add more buttons vertically if needed.
I'm thinking of using Stack then positioned but i'm not familiar on how to implement it.
return MaterialApp(
home: Scaffold(
backgroundColor: Theme.of(context).accentColor,
body: Center(
child: Column(
children: <Widget>[
AvatarGlow(
endRadius: 90,
duration: Duration(seconds: 2),
glowColor: Colors.white24,
repeat: true,
repeatPauseDuration: Duration(seconds: 2),
startDelay: Duration(seconds: 1),
child: Material(
elevation: 8.0,
shape: CircleBorder(),
child: CircleAvatar(
backgroundColor: Colors.grey[100],
child: FlutterLogo(
size: 50.0,
),
radius: 50.0,
)),
),
DelayedAimation(
child: Text(
"PICKNIC",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 35.0,
color: Colors.white),
),
delay: delayedAmount + 1000,
),FlatButton.icon(
onPressed: () {
Navigator.of(context).pushNamed('/Pages', arguments: 2);
},
padding: EdgeInsets.symmetric(vertical: 14),
color: Theme.of(context).primaryColorDark.withOpacity(0.1),
icon: new Icon(MdiIcons.facebook, color: Theme.of(context).primaryColorDark),
shape: StadiumBorder(),
label: Text(
'Login with Facebook',
textAlign: TextAlign.start,
style: TextStyle(
color: Theme.of(context).primaryColorDark,
),
),
),
],
),
),
),
);
You will solve using Expanded widget.
Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: MaterialButton(
onPressed: () => {},
child: Text(_register ? 'REGISTER' : 'LOGIN'),
),
),
),
You can check following solutions:
If you need 1 button, simply use FloatingActionButton docs
If you need multiple suggest this article (Column with FABs)
And animated solution looks more user friendly package
If you want to have the content centered in the available space above the buttons, you could put your content centered in a Expanded widget and put the buttons below it, like this:
Center(
child: Column(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AvatarGlow(...),
DelayedAimation(...),
],
),
),
FlatButton.icon(...),
FlatButton.icon(...),
],
),
)
If you want to have the content centered in the entire screen and the buttons at the bottom, you could use a Stack, like this:
Stack(
children: <Widget>[
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AvatarGlow(...),
DelayedAimation(...),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton.icon(...),
FlatButton.icon(...),
],
),
)
],
)