Menu
Here's the design that I want to build:
This is where I am now:
When I tried wrapping the Sized Box of the CircleAvatar with Overflow Box, I got the 'A RenderFlex overflowed by Infinity pixels on the bottom' error. I tried to use stack, but realise that it is making things more complicated. I feel like Overflow Box is the answer but couldn't get my head around it.
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(
child: CircleAvatar(
radius: 40.0,
backgroundColor: Colors.white,
child: CircleAvatar(
child: Align(
alignment: Alignment.bottomRight,
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 12.0,
child: Icon(
Icons.camera_alt,
size: 15.0,
color: Color(0xFF404040),
),
),
),
radius: 38.0,
backgroundImage: AssetImage(
'assets/images/user-image-default.png'),
),
),
),
Center(
child: Container(
padding: EdgeInsets.only(top: 16.0),
child: Text(
'Hi Sir David',
style: TextStyle(
fontFamily: 'SF Pro',
fontWeight: FontWeight.w700,
fontSize: 24.0,
),
),
),
),
Center(
child: Container(
padding: EdgeInsets.only(top: 8.0),
child: Text(
'Wildlife Advocate',
style: TextStyle(
fontFamily: 'SF Pro',
fontSize: 12.0,
),
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.all(24.0),
child: TextButton(
onPressed: () {
print('im pressed');
},
child: Container(
padding:
EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 8.0),
decoration: BoxDecoration(
color: Color(0xFFEF476F),
borderRadius:
BorderRadius.all(Radius.circular(20.0)),
),
child: Text(
'Edit Profile',
style: TextStyle(
fontFamily: 'SF Pro',
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 16.0,
),
),
),
),
),
),
],
),
margin: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16.0),
),
),
983
The fix for the bottom overflow of the cards that are currently grouped in a Column widget is the same as discussed above: replace Column by ListView. There can be numerous reasons for an overflow issue in Flutter. The most common that occurred to me were connected to the Row and Column widget.
If you need to display avatar of a user, Flutter has already provides a widget for it. The CircleAvatar is designed for that purpose. It creates a circle avatar where you can set the image to be used. This tutorial shows you how to use CircleAvatar including how to customize the look of it. An avatar usually has a picture.
Why does overflow happen anyways? In Flutter, the dimensions of a widget are determined by the constraints it gets from its parent. These constraints are very simple, they consist of width and height, each with a min and max value. The child widget receives these constraints and brings them in line with its own wanted size.
We will use BoxDecoration () to shape container circular. see the example below: Here, container is square with equal height and width, and added circular border raius mroe than 50% of width of container. In this way, you can shape Container as circle with circular border radius in Flutter app.
I'm not giving full code of your example but this may help you. I just code this dartpad and hopefully it provides the solution ...
Stack(
children: [
Container(
margin: EdgeInsets.only(top: 48),
height: 300,decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16.0),
),),
Align(
alignment: Alignment.topCenter,
child: SizedBox(
child: CircleAvatar(
radius: 40.0,
backgroundColor: Colors.white,
child: CircleAvatar(
child: Align(
alignment: Alignment.bottomRight,
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 12.0,
child: Icon(
Icons.camera_alt,
size: 15.0,
color: Color(0xFF404040),
),
),
),
radius: 38.0,
backgroundImage: AssetImage(
'assets/images/user-image-default.png'),
),
),)
),
]
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
