I am new to flutter and creating a project where the design contains rounded top navigation. In flutter we have tab bars. So I searched around but could not find the solution. There were solution for rounded tabs but not the tab bar as whole. Is it even possible or is there a work around it.
You can create custom tab bar using Container and Stack to positioned Container on top.
Something like this.
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(
children: <Widget>[
Positioned(
top: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: 80,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(25.0))
),
child: Row(
children: <Widget>[
//icons buttons
],
),
),
)
],
)
),
Related
I need your help. I am trying to replicate a design I saw from Instagram for personal growth. I have an Image inside Stack, the Stack is a child to a Container with Border radius. However, the image inside the box doesn't take after the border radius. I have tried different methods but none of them worked.
What I am getting is
VS what I am trying to get
How can I make the image have a border radius even though is Positioned outside the box ??
Here is a snippet of my code
Container(
width: 300,
height: 500,
decoration: BoxDecoration(
color: boxColor,
borderRadius: BorderRadius.circular(12.0),
),
child: Stack(
children: [
Positioned(
right: -150,
top: -200,
child: ClipRRect(
clipBehavior: Clip.antiAlias,
// borderRadius: BorderRadius.circular(12.0),
child:Image.asset(
height: width*.35,
width: width*.35,
"assets/box.png",
),
),
),
],
),
)
Include clipBehavior: Clip.hardEdge, on container
Container(
width: 300,
height: 500,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(12.0),
),
If you still like to use ClipRRect use it on top of container.
I was trying to create a scroll view and add a gesture detector to find the exact location of the screen.
The gesture Detection shows location of the blue Container which is correct because its the child, but it shows the pixel position relative to the phone. I want to see the pixel position relative to the full screen(body). That means the blue Container starts after (10,000 pixels). Any help would be appreciated.
My code:
body: SingleChildScrollView(
child: Column(
children: [
Container(
color: Colors.redAccent[200],
height: 1000.0,
width: 500.0,
alignment: Alignment.center,
),
GestureDetector(
onVerticalDragStart: (DragStartDetails details){
print("Start");
print(details);
},
),
Container(
color: Colors.blueAccent[200],
height: 1000.0,
width: 500.0,
alignment: Alignment.center,
),
],
),
),
Also Why is the SingleChildScrollViewNot working on the blue side?
Image of Screen
Image of output of Gesture Detector
Column widget is showing extra space between consecutive widgets even when using simple containers with their padding set to 0. I have tried using SizedBox, setting mainAxisSize to min but nothing seems to be working.
Moreover this issue is only appearing in Android OS and not on Web or iOS.
My Code:
Scaffold(
backgroundColor: Colors.yellow,
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.zero,
height: 50,
color: Colors.black,
),
Container(
padding: EdgeInsets.zero,
height: 100,
color: Colors.black,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.black,
)
],
),
),
)
Output:
I have zoomed the image a bit to on the right to display the gap better. There is a line of space appearing between the 2 containers. I have placed another container of 150 height below the column to show the difference between complete opaque and space. I have recreated this same behaviour on Pixel 3 Emulator as well as OnePlus 6T device.
Can anybody help me with a fix to this. I know this can be solved using Stack and Positioned but I was hoping to find out if this is an issue in Flutter SDK or a fixable widget behaviour.
That's a pretty annoying effect indeed. And though I can't tell you why this is happening, playing around with it a bit, it seems that giving the Container a BoxDecoration with a Border instead of a color removes the artifacts:
Scaffold(
backgroundColor: Colors.yellow,
appBar: AppBar(
title: Text('title'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
color: Colors.black,
),
padding: EdgeInsets.zero,
height: 51,
//color: Colors.black,
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
color: Colors.black,
),
padding: EdgeInsets.zero,
height: 100,
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
color: Colors.black,
),
height: 150,
//color: Colors.black,
)
],
),
),
)
For me answer didn't work (probably because i had clipPath over container but i found similar solution)
decoration: BoxDecoration(
border: Border.all(width: 0, color: Colors.yourColor),
color: Colors.yourColor,
),
In all containers at your column
Currently the only way I could make this kind of curved effect would be through making 2 container, making 1 a child of another and making 1 container's colour into the background colour.
However I cannot replicate this effect if the background is an image. Could anyone assist?
Example of the code I use:
Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Container(
height: 100,
color: Color(0xFF0D6068),
),
Expanded(
child: Container(
color: Color(0xFF0D6068),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
)),
),
))
],
)),
);
You can make use of a Stack widget to achieve this, such that the background color or image would be at the back then the curved container would be stacked on it. Here is an example code.
Stack(children <Widget> [
Image.asset(''),
Container()
]
)
Instead of using an image asset, you can make use of BoxDecoration with the decoration parameter of a container. The BoxDecoration has an image parameter where you can provide your image with a DecorationImage() widget.
Hi Everyone I am creating a profile page for a flutter app.
The SliverAppBar needs to show the below view when in the expanded state:
And below view when the user scrolls the silver list.
As you see this is a custom stack that I can create.
I don't know how to do it in slivers in a flutter.
Any links would also be highly appreciated to learn in-depth about flutter and slivers especially.
Code for the collapsed stack:
Stack(
alignment: Alignment.topRight,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 12),
width: 2000,
height: 80,
decoration: BoxDecoration(boxShadow: [
BoxShadow(blurRadius: 5.0, color: Colors.black87)
])),
Container(
margin: EdgeInsets.only(right: 20, top: 5),
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(blurRadius: 5.0, color: Colors.black87)
],
border: Border.all(color: Colors.cyan, width: 3.0)),
child: CircleAvatar(
backgroundImage: AssetImage(
"assets/images/food/avocado-f.jpg"),
radius: 50,
),
)
],
),
You should use SliverPersistentHeader and create your own SliverPersistentHeaderDelegate.
In the build method you add your Stack view and you can use Transform or SizedBox to scale and transform the circle depending on the height of the header.
There is a nice tutorial that explains how to use this widget
https://medium.com/flutter-community/how-to-code-a-dynamic-header-in-flutter-e171ec2231bf