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
Related
I store in the title the text and icon that are displayed in the AppBar in the center. During the transition, the back button that appears takes up part of the line and my centering shifts. Can I somehow get around this and make the titled centered even if there is a back button ?
The bottom icon is located in the center of the screen
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: BackButton(
color: Colors.grey
),
elevation: 0,
title: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.telegram_sharp, color: iconColor),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 2, vertical: 2)),
Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
],
))),
body: Padding(
padding: const EdgeInsets.all(20),
child: ListView(
children: [
_MainInfoWidget(),
],
),
),
);
}
You need to set the following properties on the Row():
MainAxisAlignment.center
MainAxisSize.min
And:
centerTitle: true
On the appBar().
Also, remove your Center() widget.
Complete example:
Scaffold(
appBar: AppBar(
centerTitle: true,
leading: BackButton(color: Colors.grey),
elevation: 0,
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.telegram_sharp, color: Colors.black),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 2, vertical: 2)),
Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
],
)),
body: Padding(
padding: const EdgeInsets.all(20),
child: Container(),
),
);
Result:
Try this
AppBar(
centerTitle: true
And
mainAxisSize: MainAxisSize.min
Or if that's not helped
When the transition occurs, change
mainAxiAlignment: MainAxisAlignment.start otherwise center
I am trying to replicate the AppBar widget as shown in the image below. I tried using Row widget and added the required widgets inside it's children and added crossAxisAlignment: CrossAxisAlignment.center in order to align all the widgets in center (horizontally, as it is a Row widget). But I'm unable to achieve the results, getting A RenderFlex overflowed by 26 pixels on the right. error, (obviously because it is flowing out of the appBar area).
Required:
Mine:
Code:
Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
color: Colors.black,
)
],
leading: InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 40,
width: 40,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
"Welcome",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
color: Colors.grey,
),
),
Text(
"John",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
onTap: () { // open drawer },
),
),
);
If anyone could guide me what I'm doing wrong, I would really appreciate it!
Thanks!
Lets try title
Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
color: Colors.black,
)
],
title: InkWell(
onTap: (){},
child: Row(
children: [
Container(
width: 40,
height: 40,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
),
SizedBox(width: 10,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Welcome",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
color: Colors.grey,
),
),
Text(
"John",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
),
),
body: Container(
))
with leading
leadingWidth: double.infinity,
leading: InkWell(-------)
output:
The reason why this is happening is that you are using leading property, which has width limitation defined by leadingWidth properly of AppBar, which is 56.0 by default. You can try setting leadingWidth with value double.infinity and that would work.
Alternatively you should re-consider using leading, as its main purpose is some icon or small widget coming before title.
you can replace my source code, please it will work 100%. best of luck!
Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
color: Colors.black,
)
],
leading: InkWell(
child: FittedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 40,
width: 40,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
"Welcome",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
color: Colors.grey,
),
),
Text(
"John",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
),
),
));
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.
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.
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'),
))),