Related
I want to create a custom text field in flutter like shown in the picture. Outlined TextField border with label and icon in the middle of the border line.
Is there any way to create such TextField?
Thank in advance.
You can use stack to achieve the UI
Stack(
children: [
TextFormField(
...apply the border here
),
Positioned(
left: 16.0,
top: 5.0,
child: Container(
padding: EdgeInsets.all(5.0),
color: AppColors.whiteColor,
child: Row(
children: [
Image.asset(your_image),
Text("Name")
],
),
),
),
],
);
I want to achieve this
This is my code
Row(
children: [
Expanded(
flex: 1,
child: Text(
"somethinig here..."),
),
Expanded(
child: ClipRect(
child: Wrap(
children: [
SvgPicture.asset(
"assets/3958830.svg",
width: autoHeight(550),
allowDrawingOutsideViewBox: true,
fit: BoxFit.fitHeight,
),
],
),
),
),
],
),
Result:
You can see how the image is clipped, I just want to clip all sides except the left side.
You can wrap the image widget with an Align widget to easily position the image inside the clipper. The widthFactor and heightFactor properties are used to decide the size of the clipper and alignment is used to decide the position of the `clipper
A Nice Example to use the Align Widget with ClipRect will be
ClipRect(
child: Container(
child: Align(
alignment: Alignment.centerLeft,
widthFactor: 0.6,
heightFactor: 1.0,
child: Image.network(
'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'
),
),
),
);
To Know More about the Clippers see This Article
Just wrap your Text widget with Center.
And SvgPicture with Align. (I realize this later.)
Row(
children: [
Expanded(
flex: 1,
child: Center(child: Text("somethinig here...")),
),
Expanded(
child: ClipRect(
child: Wrap(
children: [
Align(
alignment: Alignment.centerRight,
child: SvgPicture.asset(
"assets/3958830.svg",
width: autoHeight(550),
allowDrawingOutsideViewBox: true,
fit: BoxFit.fitHeight,
)),
],
),
),
),
],
)
I have an image slider. On top of the image slider three dots should be displayed the change the image. The dots should be centered at the bottom of the image. Additionaly I need a button also as an overlay. The button should be displayed on the right side vertically centered.
I use a stack but I'm not able to align the control elements.
Stack(children: [
CarouselSlider(
items: children,
options: CarouselOptions(
autoPlay: false,
viewportFraction: 1.0,
aspectRatio: 2.0,
enableInfiniteScroll: false,
onPageChanged: (newIndex, reason) {
setState(() {
currentImage = newIndex;
});
}),
),
// This row should be at the bottom of the image slider
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: children.map((url) {
index++;
return Container(
width: 8.0,
height: 8.0,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: currentImage == index - 1
? Color.fromRGBO(255, 255, 255, 0.9)
: Color.fromRGBO(255, 255, 255, 0.4),
),
);
}).toList(),
),
// This row should be centered on the right
Align(alignment: Alignment.centerRight,child: PhotoButtons(eventId: widget.event.id, preview: true))
]),
You can align the children widgets in a Stack by using the alignment property.
Stack(
alignment: Alignment.bottomCenter,
children: [
// Your widgets
],
),
This will align all the children at the bottom center, but we don't want that, right?
So, we will use another widget know as Positioned widget. We can specify the exact position of our widget from the top, left, right or bottom. By using MediaQuery, you can easily display it in the center-right position.
Stack(
alignment: Alignment.bottomCenter,
children: [
// Your widgets
Positioned(
top: MediaQuery.of(context).size.height * 0.45,
right: 0, // the position from the right
),
],
),
Please note that Positioned widget can be used only in a Stack widget.
Use Positioned widget instead of Align, take a look this example
Add the align widget in the stack and then change its alignment to wherever you want the widget to show in that stack space
Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
for (var i = 0;i < localImages.length;i++)
Text('.',style: TextStyle(fontSize: 60,color:Colors.grey),)
],
))
])
I'm so confused about how the clipping system in Flutter works.
So I will start with this example, Non of the shadow has been clipped.
Even the shadow was overflow from its self or its parent container.
Container(
child: Column(
children: [
Text("test"),
Container(
margin: paddingTheme.edgeInsets,
child: Row(
children: [
ShadowBox(),
ShadowBox(),
ShadowBox(),
],
),
),
],
),
)
Now if I add more ShadowBox() until it overflows, All the shadow will be clipped.
For example:
Container(
child: Column(
children: [
Text("test"),
Container(
margin: paddingTheme.edgeInsets,
child: Row(
children: [
ShadowBox(),
ShadowBox(),
ShadowBox(),
ShadowBox(), // ADD THIS
],
),
),
],
),
)
Now even I change Row to be SingleChildScrollView or List it's still clipped, But not overflow
Container(
child: Column(
children: [
Text("test"),
Container(
margin: paddingTheme.edgeInsets,
child: ListView.builder( // CHANGE FROM ROW TO LIST
scrollDirection: Axis.horizontal,
itemCount: 5,
itemBuilder: (c, i) => ShadowBox(),
),
),
],
),
)
So the question is how it's work, And how can I prevent these shadows to be clipped?
Or it's a design flaw of Flutter itself?
I had fire this in the Flutter's issue.
https://github.com/flutter/flutter/issues/67858
As I understand from now, The default ClipBehaviour of Container Row Column is different from ListView and internal Overflow.
So we have a workaround by adding clipBehaviour: Clip.none to the ListView.
Edit: To get the overlap shadows and no clipping, you can try:
In ShadowBox() widget,
Container(
height: 100,
width: 100,
margin: EdgeInsets.only(top: 20,bottom: 20), <-----
decoration:BoxDecoration(
color: Colors.white,
boxShadow: [BoxShadow(color: Colors.blue,blurRadius: 12)]
),
),
As for why it is clipped?
In Flutter engine, clipping the shadow is default behavior.
If you go deep in code you will find that shadow's width/height is not taken into account while rendering children in ListView or any widget. So you have to take care of it.
Why is it not clipping in Row/Column then?
In Rows and columns, no clipping is visible because it assumes the height of Row/Column as per the parent's max height/width. So it's height/width is at Max/Infinity.
So if you increase the width and height of the ListView()'s parent Container() widget, clipping will not happen as well.
I have a stack widgets with two widgets inside.
One of them draws the background, the other one draws on top of that.
I want both widgets to have the same size.
I want the top widget, which is a column, to expand and fill the stack vertically to the size that is set by the background widget.
I tried setting the MainAxis mainAxisSize: MainAxisSize.max but it didn't work.
How can I make it work?
Use Positioned.fill
Stack(
children: [
Positioned.fill(
child: Column(
children: [
//...
],
),
),
//...
],
);
More info about Positioned in Flutter Widget of the Week
How does it work?
This is all about constraints. Constraints are min/max width/height values that are passed from the parent to its children. In the case of Stack. The constraints it passes to its children state that they can size themselves as small as they want, which in the case of some widgets means they will be their "natural" size. After being sized, Stack will place its children in the top left corner.
Positioned.fill gets the same constraints from Stack but passes different constraints to its child, stating the it (the child) must be of exact size (which meant to fill the Stack).
Positioned.fill() is the same as:
Positioned(
top: 0,
right: 0,
left: 0,
bottom:0,
child: //...
)
For even more examples and info: How to fill a Stack widget and why? and Understanding constraints.
You can try wrapping the Column with a positioned widget. Set top to 0 and bottom to 0. This will make the column fill the stack vertically.
sample code:
Stack(
children: <Widget>[
// Background widget rep
Container(
color: Colors.pink,
),
Positioned(
top: 0,
bottom: 0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('madonna'),
Text('flutter'),
],
),
)
],
)
I think you could wrap you column in a container like this:
Container(
height: double.infinity,
width: double.infinity,
child: Column()
),
The accepted answer did not answer my issue completely. So, I put my code here in case you have a similar issue.
class NoContentView extends StatelessWidget {
const NoContentView({Key? key, required this.message}) : super(key: key);
final String message;
#override
Widget build(BuildContext context) {
return Expanded(
child: Stack(
children: [
Positioned.fill(
child: FittedBox(
child: const Image(image: AssetImage(AppImages.noReceiptsWeb), fit: BoxFit.fitWidth),
),
),
MessageView(message: message),
],
),
);
}
}
In my case, I thought that I needed to expand the container in the light blue color with an expanded widget inside the stack widget.
Problems arose, especially since I was adding the stack widget in the column widget, and the way to make the container double.infinity dimensions I definitely had a problem with the vertical axis.
In the end, I managed to show it like this photo...
Column(
children: [
//filter
Container(
color: orange,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
child: Text(
'All',
style: getRegular(color: white.withOpacity(.6)),
),
),
Container(
color: white.withOpacity(.6),
width: 1,
height: 50,
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 10, 0),
child: Text(
'Ready',
style: getRegular(color: white.withOpacity(.6)),
),
),
freeh(),
Container(
color: white.withOpacity(.6),
width: 1,
height: 50,
),
],
),
Row(
children: [
Icon(
filter,
color: white.withOpacity(.7),
size: 20,
),
Text(
'FILTER',
style: getLight(
color: white.withOpacity(.7),
),
),
freeh(),
],
),
],
),
),
Expanded(
child: Stack(
alignment: Alignment.topLeft,
children: [
Container(
color: lightBlue, //here to use map>>>>
),
Container(
height: 35,
width: 120,
margin: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: primary,
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(
FontAwesomeIcons.listUl,
color: white.withOpacity(.8),
size: 20,
),
Text(
'List View',
style: getRegular(color: white.withOpacity(.8)),
)
],
),
),
],
),
)
],
),