How do I make an icon rest on the bottom of a container, just like in the picture. So that even when I scroll the page and the container moves. The icon moves with it in that particular position.
The icon in this page is the empty profile icon resting on the container with the exes image. I don't want my container to have an image though.
Just color image of the container and round icon.
Image of the container and icon even when scrolled.
NOTE. I don't want the container to be the app bar. Just a container on its own under the app bar. I'm only showing this picture so u can see what I'm talking about.
did you try this
Align(
alignment: Alignment.topCenter,)
Did you want it like this :
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 300,
color: Colors.cyan[900],
),
Stack(
clipBehavior: Clip.none,
alignment: AlignmentDirectional.topCenter,
children: [
Container(
width: double.infinity,
color: Colors.grey[900],
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
height: 150, // +50 below circle Container
),
const Text(
'Happiness',
style: TextStyle(color: Colors.white, fontSize: 32),
),
const SizedBox(
height: 30,
),
Container(
height: 200,
width: 300,
color: Colors.amber[900],
),
const SizedBox(
height: 30,
),
Container(
height: 200,
width: 300,
color: Colors.red[900],
),
],
),
),
Positioned(
top: -100,
child: Container(
height: 200,
width: 200,
decoration: const BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(
'assets/images/cyanide.png',
)),
color: Colors.deepPurple,
),
),
),
],
),
],
),
),
may be what you need is to use CustomScrollView and SilverAppBar with bottom:
here is the reference: example
plus transform
Related
I am designing a widget where, I want to put widget in the center of two rectangular container. My idea is that when I click on it, center widget becomes visible. It looks like this.
What I wanted to do is that clicking on one grey container or both, this purple widget becomes visible, clicking again, it would disappear. This is my code below.
Stack(
alignment: Alignment.center,
children: [
Container(
width: 70,
height: 40,
color: Colors.indigo,
),
Container(
width: 100,
height: 70,
child: Column(
children: [
Container(
width: 100,
height: 30,
decoration: BoxDecoration(
color: Colors.grey,
),
),
SizedBox(height: 10,),
Container(
width: 100,
height: 30,
decoration: BoxDecoration(
color: Colors.grey,
),
),
],
),
),
],
),
However, with this the widget hides behind two widgets like this.
Anybody can help me with its positioning?
Here is my answer.
Stack(
alignment: Alignment.center,
children: [
Container(
width: 100,
height: 70,
child: Column(
children: [
Container(
width: 100,
height: 30,
decoration: BoxDecoration(
color: Colors.grey,
),
),
SizedBox(height: 10,),
Container(
width: 100,
height: 30,
decoration: BoxDecoration(
color: Colors.grey,
),
),
],
),
),
Container(
width: 70,
height: 40,
color: Colors.indigo,
),
],
),
what I want to achieve is to make the parent only clickable not the child of the parent.
Suppose, there is a clickable container with the size of 400x400, and the child of that container is another container with the size of 200x200.
Now if we touch the second container(smaller one), it is also clickable. How can I prevent the small container from getting clicked?
I have tried almost everything but I may don't have that good skills at flutter, please help.
Code:
InkWell(onTap: (){print('Container Clicked');},child:
Container(height: 400, width: 400, color: Colors.blue,
child: Center(child: Container(height: 200,width: 200, color: Colors.green,)),),)
try this
InkWell(
onTap: (){
print('Container Clicked');
},
child: Container(
height: 400,
width: 400,
color: Colors.blue,
child: Center(
child: GestureDetector(
onTap: () {}, /// <-- locked inkwell tap
child: Container(
height: 200,
width: 200,
color: Colors.green,)
),
),
),
)
I hope I got your question right. This is the code if you want to make only the bigger container clickable,
Stack(
children:[
InkWell(
onTap: (){
print('Container Clicked');
},
child: Container(
height: 400, width: 400,
color: Colors.blue,
),
),
Center(
child: Container(
height: 200,width: 200,
color: Colors.green,
),
),
],
),
I'm coding a layout like homepage from Linkedin, Twitter, etc (example here) with Flutter for Web, but the Profile Tab it's not fixing on top of layout. I need something like gravity property (Android), I tried usign Align class, CrossAxisAlignment, MainAxisAlignment but it didn't work. Also I tried to set a margin/padding subtracting the height of the context with container, but it didn't work either
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: EdgeInsets.only(top: 30, left: 50, right: 50),
child: Row(children: [
Expanded(
flex: 1,
child: Column(
children: [
Container(
margin: EdgeInsets.only(right: 50),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Center(child: Text('Trend Stories')))
],
),
),
Expanded(
flex: 2,
child: Column(
children: [
Container(
margin: EdgeInsets.only(right: 50),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
height: MediaQuery.of(context).size.height,
child: Center(child: Text('Trend Stories')))
],
),
),
Expanded(
flex: 1,
child: Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
height: MediaQuery.of(context).size.height,
child: Center(child: Text('Trend Stories')))
],
),
),
])));
code
I want to find out why border radius wouldn't apply top half of the widget on Android.
Here is the image on Android
However on the web, it's working like image below.
Does anyone know why?
Code
Center(
child: Card(
elevation: 1.5,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
child: SizedBox(
width: 250.0,
height: 150.0,
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 60.0,
color: Colors.pink[200].withOpacity(0.95),
child: Center(
child: Text('Felicity Jones'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Center(
child: Text('9:15'),
),
),
)
],
),
),
),
),
If you observe carefully by changing the opacity of the color for time being to:
color: Colors.pink[200].withOpacity(0.2),
You'll see that the top left and top right corners are cut-off and not filled by the color:
In order to avoid this, use Card widget's clipBehavior: Clip.antiAlias, property that covers all corners of the card with the given color. Here's the updated result:
Hope this answers your question.
You can try the following:
Center(
child:
Card(
elevation: 1.5,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
child: SizedBox(
width: 250.0,
height: 150.0,
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: new Radius.circular(16.0)
),
color: Colors.pink[200].withOpacity(0.95),
),
width: double.infinity,
height: 60.0,
child: Center(
child: Text('Felicity Jones'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Center(
child: Text('9:15'),
),
),
)
],
),
),
),
),
Note that the color was moved inside the BoxDecoration as it will fail to compile otherwise.
I kept the shape attribute so that the lower part of the card will be rounded as well. You could tinker with that and remove it, if necessary.
Edit: In your case like #Darshan mentioned you can just set clipBehavior: Clip.antiAlias in Card widget.
You can use also use ClipRRect to force the child to have the given border radius, if you don't have clipBehavior.
Center(
child: Card(
elevation: 1.5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: SizedBox(
width: 250.0,
height: 150.0,
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 60.0,
color: Colors.pink[200].withOpacity(0.95),
child: Center(
child: Text('Felicity Jones'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Center(
child: Text('9:15'),
),
),
)
],
),
),
),
),
)
I'm trying to place a text countdown timer in the center of a CircularProgressIndicator. This is the code for the layout of the body:
return new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 200,
height: 200,
child: new CircularProgressIndicator(
strokeWidth: 15,
value: value,
),
),
Align(
alignment: FractionalOffset.center,
child: Text("Test")
)
],
),
...
],
);
Adding the Align() widget changes the layout from this:
to this:
I've also tried
Align(
alignment: Alignment.center,
child: Text("Test")
)
and
Center(
child: Text("Test"),
)
instead of the Align() widget, but they all produce the same result
That's because your Stack doesn't have size, so to fix your issue, wrap your Stack inside SizedBox, set a height, and Center the Text.
Column(
children: <Widget>[
SizedBox(
height: 200.0,
child: Stack(
children: <Widget>[
Center(
child: Container(
width: 200,
height: 200,
child: new CircularProgressIndicator(
strokeWidth: 15,
value: 1.0,
),
),
),
Center(child: Text("Test")),
],
),
),
],
)
Use Positioned They are meant to be used with Stacks.
As per documentation:
A Positioned widget must be a descendant of a Stack, and the path from the Positioned widget to its enclosing Stack must contain only StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).
Also, don't forget to wrap your Stack inside a Container or Center so as to put constraints to the box.
Column(
children: <Widget>[
SizedBox(
height: 40,
child: Stack(
children: <Widget>[
Container(
width: 40,
height: 40,
child:
new CircularProgressIndicator(
value: 10,
color: Colors.red,
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
top: 15,
child: Text(
bytesDownload!,
textAlign:
TextAlign.center,
style: TextStyle(
fontSize: 10,
),
)),
],
),
),
],
)
Just Wrap it inside a SizedBox()
https://i.stack.imgur.com/fJfaL.png