In the bottom section, there is a border displayed between two container widgets,
For the above Container, I have used a Stack having two containers as children, one having black bg and the other having white, Below the stack I have displayed another container having black bg and a rounded corner on another end, The code is given below, I want to blend that two container so that they appear to be one single container.
Expanded(
child: Stack(children: [
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(37, 37, 37, 1),
),
),
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(255, 255, 255, 1),
borderRadius: BorderRadiusDirectional.only(
bottomStart: Radius.circular(100)),
)),
]),
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Color.fromRGBO(37, 37, 37, 1),
borderRadius:
BorderRadiusDirectional.only(topEnd: Radius.circular(100)),
),
),
),
I think that the grey row isn't elevation. It's because of the border of the white container. Please remove the color or put it transparent and test again.
Related
What I want to implement is like this style. Pls see the picture below.
Need show
The border is gradient, start color is
#08FFFB
and the end color is
#FF4EEC
.And the background which like black is also gradient which start color is
#3A3A3A
and the end color is
#0B0B0B
The corner radius is 16.
I want to use it as a custom indicator in TabBar component. So, I custom the
indicator
like this.
#override
Widget build(BuildContext context) {
List\<String\> list = \["全部","读书","电影", "小说"\];
return Padding(
padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
child: Container(
width: double.infinity,
height: 62,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Padding(
padding: EdgeInsets.fromLTRB(25, 13, 25, 13),
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: YYSColors.yysTextColor(),
isScrollable: true,
indicator: new BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: \<Color\>\[
Color(int.parse("FF3A3A3A", radix: 16)),
Color(int.parse("FF2B2B2B", radix: 16))
\],
),
borderRadius: BorderRadius.circular(16),
border: new Border.all(
color: Color(int.parse("FF08FFFB", radix: 16)), width: 2),
),
tabs: list
.map((String arenaType) {
return Tab(text: arenaType);
}).toList(),
),
),
),
)，
);
}
I have tried to use image in BoxDecoration but it is not work. And I also get some informations from internet that maybe I can use a custom Widget extends Decoration, but I need to override paint() method. It is too difficulty to me. So I came here to ask for help. Thanks a lot.
It is my frist question at here. So the format is not that good. Pls forgive me.
Defining gradient for container is pretty straight forward,
For border gradient please follow this good blog.
https://blog.logrocket.com/how-to-create-simple-gradient-borders-flutter/
Design a gradient container.
Using Stack take the second container.
How do I make the icon in showModalBottom above the middle, like the picture above, I made it using a container and set the position to positioned but it was cut off when I set the top to negative, like the following picture
Instead of using Positioned you can actually use Transform.translate to shift the Container. Consider that you use half the height of the container as y-Offset and multiply it with -1.
Example:
Transform.translate(
offset: const Offset(0,-50), // <- use half the height of the container
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.white,
border: Border.all(
color: const Color.fromRGBO(251, 202, 191, 1),
width: 4
)
),
width: 100,
height: 100, // Container has height 100
),
)
I want to create those blue circles (you can see them on the picture), the app UI design was created with Figma.
I don't even know how to start, I'm new at flutter
Any ideas or tips?
You can start learning from flutter.dev.
There are many ways to do this. I am using Container with decoration
Container(
height: 70,
width: 70,
padding: EdgeInsets.all(10), //spacing using padding
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(width: 5, color: Colors.blue),
),
child: const Material( //inner circle
color: Colors.green,
shape: CircleBorder(),
),
)
More about Container.
I wanted to draw a dynamic height line, as shown in the given picture below
I did something line this using a continer with one sided border
Container(
child:(content goes here....)
margin: EdgeInsets.symmetric(horizontal:16+20.0),
decoration: BoxDecoration(
border: Border(
left: BorderSide(width: 2.0, color: Colors.lightBlue.shade600),
),
color: Colors.white,
),
)
but the issue is the corners(top and below) of the line is not rounded.
I want to draw a vertical line on the left side of my post, and on the right side goes the content.
You could try something like this:
IntrinsicHeight(
child: Row(
children: [
Container(
width: 5,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
color: const Color(0x7f9e9e9e),
),
),
Expanded(child: **content goes here**),
],
),
)
And here's a DartPad example for you: Example
Which will produce something like this:
Where the bar on the left will size automatically with the contents on the right.
I am using inkwell to detect tap. I also use gesturedetector but that didn't work as well. Found a solution that say wrap the child with IgnorePointer, but that didn't work as well.
Here is my code:
Positioned(
bottom: -67,
child: GestureDetector(
onTap: () {
print('Tap');
},
child: Container(
width: 70,
height: 70,
padding: EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 5,
),
boxShadow: [
BoxShadow(
color:
Color(0xFF000000).withAlpha(11),
blurRadius: 16,
offset: Offset(0, 3),
),
],
shape: BoxShape.circle,
color: Colors.white,
),
child: CircleAvatar(
radius: 24,
backgroundColor: Colors.green,
child: Icon(
Icons.arrow_forward,
color: Colors.white,
),
),
),
),
),
This is the button on which i want to detect tap.
EDIT: It is detecting the tap but outside the white border of circle avatar. I want the whole White border and circle avatar to be clickable. Removing the positioned makes the whole container clickable but now how i want to position that element in the stack !!!
Remove Positioned widget and wrap the container in Inkwell