CODE:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.blue,
body: SafeArea(
child: SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Align(
alignment: Alignment.center,
child: Container(
width: Get.width,
height: Get.width * 16 / 9,
child: Stack(
children: [
Positioned(top: 16, left: 16, child: BackButton()),
Positioned(
left: 0,
bottom: 0,
child: IconButton(
padding: EdgeInsets.symmetric(vertical: 0, horizontal: 0),
icon: Icon(
Icons.delete_forever,
color: Colors.greenAccent,
size: 32,
),
onPressed: () {
},
),
),
],
),
),
),
),
),
);
}
There is some margin on IconButton.
I think IconButton should be tight on bottom left.
How to remove margin IconButton and screen side?
Actually it's the default padding of the Icon Button only...
That is, the stack is placing the button at bottom left but icon in the button is padded by default.
You can try using Gesture detector with that icon as a child...
You will get different result...
Please correct me if i am wrong..
Related
My code without column widget gives expected UI like this
But when I add a column widget the width of the container is shrinking based on the column widget child like this
Code:
Scaffold(
backgroundColor: Color(0xffE3E4EB),
appBar: AppBar(
titleTextStyle: TextStyle(fontWeight: FontWeight.w600),
backgroundColor: Color(0xffE3E4EB),
elevation: 0,
actions: [
Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Container(
width: 60,
height: 60,
child: Icon(Icons.done),
),
)
],
),
body: Center(
child: Padding(
padding: EdgeInsets.only(top: 120, left: 20, right: 20, bottom: 40),
child: Container(
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(20)),
// child: Column( // disable this 3 line to check the UI
// children: [Text("Dinesh Nagarajan")],
// ),
),
),
),
);
How I can maintain the width of my container
You can just set the width property of container to double.infinity. It will expand to fit the maximum available width.
Nowadays there are many devices having different types of shaps, their screen is no more rectangular shape. some devices have a camera inside the screen area like a water drop from the middle of the plain surface.
Now how we can manage our app bar widget which has a center widget. SafeArea widget can only give useful when devices have corner edges.
AppBar(
elevation: 0,
title: Padding(
padding: const EdgeInsets.all(20),
child: isbgVisible
? Image.asset(
'assets/logosmal_.png',
scale: 1.5,
)
: Container(),
),
centerTitle: true,
actions: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
child: Image.asset(
'assets/man.png',
scale: 1.5,
),
),
)
],
backgroundColor: isbgVisible ? Constants.whiteColor : Colors.transparent,
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 30,
height: 30,
child: IconButton(icon: Icon(Icons.menu), onPressed: () {}),
decoration:
BoxDecoration(shape: BoxShape.circle, color: Constants.darkYello),
),
),
);
SafeArea will be useful in that case:
How to use
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: TonsOfOtherWidgets();
),
),
}
For more information. visit here
I'm trying to implement a "Change my profile picture" icon like how it appears in the profile page in Whatsapp, where a clickable camera icon hovers on the bottom right of the image.
This is the code I used inside a stateful widget:
Row(
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 120,
child: Image(
image: AssetImage('affogato.png'),
),
),
Positioned(
top: 70,
left: 90,
child: FloatingActionButton(
child: Icon(Icons.camera_alt),
onPressed: () {},
),
),
],
),
],
),
Strangely, the Icon seems to take the constraints of the Image container. So when I set the width as 120 and try to push the Icon button to the bottom right edge of the Image, it gets cut off by the Image constraints. How do the constraints of the Container affect the FloatingActionButton even though they're siblings inside the Stack not parent-child widgets? And how can I fix this so that the Icon can float over the edge of the image?
You can probably make use of height property of Positioned widget and adjust other dimensions (left, bottom, right, top) so that the button isn't cut-off at bottom right edge and is displayed properly. Working sample code below:
return Scaffold(
body: Center(
child: Row(
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 120,
child: Image(
image: AssetImage('assets/Icon-512.png'),
),
),
Positioned(
bottom: 0,
right: 0,
left: 78,
height: 35,
child: FloatingActionButton(
child: Icon(Icons.camera_alt),
onPressed: () {},
),
),
],
),
],
),
)
// This trailing comma makes auto-formatting nicer for build methods.
);
You might need to adjust dimensions per your need, but this way it doesn't cut-off the button.
Hope this answers your question.
Here's how I did it. I removed the Positioned widget completely and used Padding instead. It seemed to solve the problem. I also wrapped the image in a CircleAvatar to complete the Whatsapp style.
Row(
children: <Widget>[
Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: CircleAvatar(
radius: 70,
backgroundColor: Colors.greenAccent,
child: Container(
height: 150,
width: 150,
child: ClipOval(
child: Image(
image: AssetImage('lib/rainy.png'),
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 105, top: 80),
child: Container(
width: 50,
height: 50,
child: FloatingActionButton(
backgroundColor: Colors.green,
child: Icon(Icons.camera_alt),
onPressed: () async {},
),
),
),
],
),
],
),
I want to overlay a add to cart button on background restaurants list, Overlay card widget on container explains it can be done by Stack but I tried and still not getting how to do it. Kindly help me to know how can I do it?
Expected Design
Result Image
detailpage.dart
#override
Widget build(BuildContext context) {
return Scaffold(
body: Wrap(
children: <Widget>[
Container(...),
Container(...),
Stack(
children: <Widget>[
Center(
child: MaterialButton(
onPressed: () {},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
width: 88,
height: 30,
decoration: BoxDecoration(
color: Color(0xff00D99E),
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
blurRadius: 8,
offset: Offset(0, 15),
color: Color(0xff00D99E).withOpacity(.6),
spreadRadius: -9)
]),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/icon-chat-notification.png'),
SizedBox(width: 6),
Text("CART",
style: TextStyle(
fontSize: 10,
color: Colors.white,
letterSpacing: 1,
))
],
),
),
),
)
],
)
],
),
bottomNavigationBar: bottomNavigationBar,
);
}
The problem is that your Stack only composes the Button itself instead of the entire view, you use it to put the Text and the Icon on top of the MaterialButton. Side note: that's actually not necessary, you can just put the text and the icon directly into the MaterialButton and get rid of the Stack.
To solve your problem you have to put your button and your List onto the same Stack (your button can still stay a Stack itself but I don't encourage you to do that).
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand
children: <Widget>[
Container(...),
// Use Positioned around your List to expand it in all dimensions
Positioned(
bottom: 0,
top: 0,
left: 0,
right: 0,
child: Container(...), // This is your container with the list
)
// Position the button at the bottom
Positioned(
bottom: 0,
child: Stack(...), // This is your button
)
],
),
bottomNavigationBar: bottomNavigationBar,
);
}
I need to put icon into CircleAvatar Widget to allow user upload his image.
Something like this:
This is my code:
child: CircleAvatar(
child: Stack(
children: <Widget>[
Positioned(
bottom: 0,
right: 0,
left: 0,
height: 33,
child: Container(
height: 20,
width: 30,
color: Color.fromRGBO(0, 0, 0, .74),
child: Center(
child:
Icon(Icons.photo_camera, color: Colors.grey),
),
),
)
],
),
radius: 68.0,
backgroundImage:
NetworkImage('https://via.placeholder.com/300'),
backgroundColor: Colors.transparent,
)
But I have this result:
Internal box with camera icon overflow from parent widget (CircleAvatar);
What you want can be simply done with - ClipOval
Your Code:
body: Center(
child: CircleAvatar(
child: ClipOval(
child: Stack(
children: <Widget>[
Image.network('https://via.placeholder.com/300'),
Positioned(
bottom: 0,
right: 0,
left: 0,
height: 33,
child: GestureDetector(
onTap: (){
print('upload Clicked');
},
child: Container(
height: 20,
width: 30,
color: Color.fromRGBO(0, 0, 0, .74),
child: Center(
child: Icon(Icons.photo_camera, color: Colors.grey),
),
),
),
),
],
),
),
radius: 68.0,
// backgroundImage: NetworkImage('https://via.placeholder.com/300'),
backgroundColor: Colors.transparent,
),
),
Output:
You can create your Custom Clipper to give the circular bottom to your widget.
You need to use the ClipPath widget for it, pass your widget in your case Container containing your camera icon.
and in clipper pass your CustomClipper.
ClipPath
return ClipPath(
child: your_widget,
clipper: BottomWaveClipper(),
);
CustomCliper
class BottomCircleClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
//your path to draw circle
}
#override
bool shouldReclip(TriangleClipper oldClipper) => false;
}
Here are some links that will help you.
https://iirokrankka.com/2017/09/04/clipping-widgets-with-bezier-curves-in-flutter/
https://medium.com/flutter-community/clipping-in-flutter-e9eaa6b1721a