I want to add a subtle shadow behind this tab bar which is wrapped in a container. I tried to add it but its not showing up evidently.
I had to edit it in this way because I had to crop the edges of the bar to male it rounded.
Widget _bottomNavigationBar(int selectedIndex) => ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(52.0), topRight: Radius.circular(52.0)),
child: Container(
height: 90,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(82.0),
topRight: Radius.circular(52.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black,
offset: Offset(-5, 5),
blurRadius: 10,
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(52.0),
topRight: Radius.circular(52.0)),
child: BottomNavigationBar(
selectedItemColor: Color(0xFFFE524B),
unselectedItemColor: Color(0xFFFF8C3B),
onTap: (int index) => setState(() => _selectedIndex = index),
currentIndex: selectedIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Entypo.home,
size: 28,
),
title: Text('')),
BottomNavigationBarItem(
icon: Icon(
Entypo.game_controller,
size: 28,
),
title: Text('')),
BottomNavigationBarItem(
icon: Icon(
Entypo.wallet,
size: 28,
),
title: Text('')),
],
),
)),
);
I want my tab bar to look something like this
here the CLipRRect Widget is cutting your widget in rect with radius.
your box shadow is being cuttoff because of clip r rect
remove clipping widget and then try
Related
So I am trying to have an image at the top followed by a list below it. Intially, the list is contracted. When the list expands, I want it to overlap the image.
Initial Position - here I want the image to be at the top
Final Position - this is correct
The Problem is - If I position the image to the top, the list also moves to the top (in the initial position) which is not what I want. Also, if I use a column to position the image at the top (and the list below it) then the list does not expand all the way up to the top; it stays (and expands) below the image.
#override
Widget build(BuildContext context) {
double maxHeight = MediaQuery.of(context).size.height;
return Scaffold(
//resizeToAvoidBottomInset: false,
//backgroundColor: Color(0xFFd8e3e3),
body: Align(
child: SingleChildScrollView(
//to avoid bottom overflow error
child: Padding(
padding: const EdgeInsets.fromLTRB(5, 20, 5, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
//fit: StackFit.loose,
//alignment: Alignment.center,
children: [
// Positioned(
// top: 0,
// left: 0,
// right: 0,
Align(
alignment: Alignment(0, -1),
child: Hero(
tag: "imageHero",
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
),
child: Image.asset(
'assets/images/punjabi_egg_curry1.jpeg',
//height: screenHeight * 0.3,
//width: double.infinity,
alignment: Alignment.topCenter,
),
),
),
),
// ),
Center(
child: new ClipRect(
child: new BackdropFilter(
filter:
new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Card(
color: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: new Center(
//child: GestureDetector(
//onTap: _updateSize,
child: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Column(
children: [
AnimatedContainer(
constraints: BoxConstraints(
maxHeight: maxHeight * 0.85),
height: _height,
duration: Duration(milliseconds: 300),
decoration: new BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(20),
//border: Border.all(color: Colors.black),
),
child: Steps(),
),
//),
ElevatedButton(
onPressed: _updateSize,
child: Text(buttonText),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(
vertical: 10,
horizontal: 20,
),
primary: kSilver,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(20),
),
onPrimary: Colors.black,
textStyle: TextStyle(
color: Colors.black,
fontSize: 22,
),
),
),
],
),
),
),
),
),
),
),
// ),
],
),
],
),
),
),
),
//),
);
}
}
Wrap that widget with Positioned(top:5, child: // your widget ),
Try below code hope its help to you change your image on your need
Container(
height: 500,
child: Stack(
children: [
Container(
width: 150,
height: 150,
margin: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(
'assets/images/cycle.png',
),
),
),
),
Positioned(
top: 120,
left: 0,
right: 0,
child: Container(
height: 100,
child: ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text("List - $index"),
);
},
),
),
),
],
),
),
Your Result Screen ->
I only want the image of container blurred (line:16). This is the code:
itemBuilder: (BuildContext context, int index) {
return Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 40, bottom: 20),
width: 250,
height: 450,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
boxShadow: [
BoxShadow(
blurRadius: 8,
offset: Offset(0, 2),
),
],
image: DecorationImage(
image: AssetImage(
Category_list[index]["background"]), //Blur this image
fit: BoxFit.cover),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Text(
Category_list[index]["header"],
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.w800,
),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
width: 250,
height: 50,
//color: Colors.white,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(10)),
),
child: TextButton(
onPressed: () => {},
child: Text(
"Chat",
style: TextStyle(color: Colors.black),
),
),
),
),
],
),
),
],
);
But to use BackdropFilter you have to use the child-property from the container but this would blur everything. Does anybody know how to only blur the image? Do I have to separate the image-widget from the rest? And if so how does it still cover the complete Stack?
You can use Stack() widget to show your title or anything on top of your blurred image.
Small sample example
Container(
height: 150,
width:150,
decoration: new BoxDecoration(
color:Colors.black,
image: new DecorationImage(
image: new NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKgi8mXs-MtRnwuZVUKo1BwTXnKIl--6qZPzWmT4k3BV1wlN-vMgV2BdICGGHlekwnkVk&usqp=CAU'),
fit: BoxFit.cover,
),
),
child: Stack(
children:[
new BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
child: new Container(
decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
),
),
Text("Dog Name",style: TextStyle(fontSize: 22,),),
],
),
);
I wanna create, in my Profile Screen, an user's profile photo rounded with a button, or a something creative to change this photo like google:
But what I have now is this:
CircleAvatar(
radius: 75,
backgroundColor: Colors.grey.shade200,
child: CircleAvatar(
radius: 70,
backgroundImage: AssetImage('assets/images/default.png'),
)
),
How can I add a button like in the google example?
Using Stack you can put icon on top of the avatar and at a specific position.
Stack(
children: [
CircleAvatar(
radius: 75,
backgroundColor: Colors.grey.shade200,
child: CircleAvatar(
radius: 70,
backgroundImage: AssetImage('assets/images/default.png'),
),
),
Positioned(
bottom: 1,
right: 1,
child: Container(
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Icon(Icons.add_a_photo, color: Colors.black),
),
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(
50,
),
),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(2, 4),
color: Colors.black.withOpacity(
0.3,
),
blurRadius: 3,
),
]),
),
),
],
)
You can use Stack widget with Positioned as its child widget.
I have a container at the bottom of my screen that has a BottomNavigationBar. I want the container to get the colour of my background. Even after adding CLipRRect it wasn't getting corrected. I also tried to make the container transparent but it showed me an error where I couldn't assign a colour to my container and give it a boxDecoration.I want the excess white part to merge into my background.
//edited
How do I get rid of the shadow from the background?
Widget _bottomNavigationBar(int selectedIndex) => ClipRect(
child: Container(
height: 80,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(52.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.withOpacity(0.3),
offset: const Offset(0.0, 0.0),
blurRadius: 52.0),
],
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(52.0),
topRight: Radius.circular(52.0)),
child: BottomNavigationBar(
selectedItemColor: Color(0xFFFE524B),
unselectedItemColor: Color(0xFFFF8C3B),
onTap: (int index) => setState(() => _selectedIndex = index),
currentIndex: selectedIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Entypo.home,
size: 30,
),
title: Text('')),
BottomNavigationBarItem(
icon: Icon(
Entypo.game_controller,
size: 30,
),
title: Text('[![enter image description here][1]][1]')),
BottomNavigationBarItem(
icon: Icon(
Entypo.wallet,
size: 30,
),
title: Text('')),
],
),
)),
);
This is actually not a problem with the bottom navigation bar. You need to set "extendBody" to "true" for the parent Scaffold widget. This will extend the scaffold body content all the way down to the bottom of the screen!
Scaffold(
extendBody: true,
bottomNavigationBar: _bottomNavigationBar(selectedIndex),
);
I have a tab/navigation bar with three options. The icons in it however are not aligned in the middle. The icons look aligned on other devices but not on iPhones. They appear to be pushed a little upwards for some reason.
Widget _bottomNavigationBar(int selectedIndex) =>
Container(
height: 90,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(52.0),
topRight: Radius.circular(52.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black.withOpacity(0.5),
offset: Offset(-5, 5),
blurRadius: 20,
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(52.0),
topRight: Radius.circular(52.0)),
child: BottomNavigationBar(
selectedItemColor: Color(0xFFFE524B),
unselectedItemColor: Color(0xFFFF8C3B),
onTap: (int index) => setState(() => _selectedIndex = index),
currentIndex: selectedIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Entypo.home,
size: 28,
),
title: Text('')),
BottomNavigationBarItem(
icon: Icon(
Entypo.game_controller,
size: 28,
),
title: Text('')),
BottomNavigationBarItem(
icon: Icon(
Entypo.wallet,
size: 28,
),
title: Text('')),
],
),
));
Thank you for your help!
That is happening because of the 'title' in the bottom nav bar. Basically it is rendering a Text widget with an empty string. Not seen as its empty but its taking the space.
Good thing is that the title property in the BottomNavBar class takes a widget, so, you can pass any widget to it.
I'd suggest passing a Padding widget with zero padding, or maybe a Container with a zero height.
Implementation can look as follows:
BottomNavigationBarItem(
icon: Icon(
Entypo.home,
size: 28,
),
title: Padding(padding: EdgeInsets.all(0.0))),
BottomNavigationBarItem(
icon: Icon(
Entypo.game_controller,
size: 28,
),
title: Padding(padding: EdgeInsets.all(0.0))),
BottomNavigationBarItem(
icon: Icon(
Entypo.wallet,
size: 28,
),
title: Padding(padding: EdgeInsets.all(0.0))),
],
),