I want to use a widget with a background color that only occupy a specific space without expanding for full screen. But, if I try this with Container it doesn't work like I want:
Container(
decoration: BoxDecoration(
color: AppColors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(24),
),
),
This code occupy the full screen, instead of only using the size it needs.
The idea is to show a Text and a Button in a Column, with a white background color. How can I accomplish this?
Actually I not really understand with your question, but you can wrap container inside container, and add padding in it. Or you can use stack to make your design more dynamic.
here is my code: maybe as you wish
SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.green
),
child: Container(
color: Colors.orange,
child: Column(
children: [
Text('Text 1'),
FlatButton(onPressed: (){}, child: Text("Button1"))
],
),
)
),
)
hope this can help you, thank you
Related
If I uncomment the second text widget, then my shadows are cut off on the sides (as in the screenshot) of this and even others!! widgets on this page, if the second text widget is commented, then the shadow is displayed well on all four sides at this and others widgets on the page, I just can’t understand what could be the matter. It looks like the outer padding is erasing this shadow, because the shadow of all widgets on the page is erased from two sides, but i don't touch the padding, just uncomment the second widget text.
return Container(
padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: const [
BoxShadow(
spreadRadius: 0.05,
blurRadius: 7.0,
color: Colors.red,
)
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
'random text',
),
SizedBox(
height: 8,
),
// Text(
// 'random text 2',
// ),
],
),
);
Shadow needs empty space to be rendered. The padding of this container is in the inside of the shadow. Try also using margin of the container or placing another Padding widget as a parent to this Container to solve it.
As for why exactly this text is making a difference, it's hard to tell and requires a bit of debugging.
this issue because the padding Fills the empty space of box shadow, for this problem you should add padding in child of container not in container widget because it destroys spaces
do like this code:
Container(
decoration: BoxDecoration(
//some shadow
),
child: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 24.0),
child: Column(
children[]
),
),
),
I have two icons in a stack. I want one to hide the other, but instead it's semi-transparent and the other is shown behind it.
This is the code:
Stack(
children: [
Container(child: Icon(Icons.account_circle_rounded), padding: EdgeInsets.only(left: 10),),
Container(child: Icon(Icons.account_circle_rounded), padding: EdgeInsets.only(left: 20),),
],
)
This is how it looks:
Icons are more like SVG, use vector to draw shape. There are some empty spaces inside the icon to draw the path, and we can see the background though this. Also, it contains padding around it, You can use your assets to draw the UI.
We can wrap with another ColoredBox to hide the background icon, but it will get extra padding from IconData.
This snippet shows basic level structure.
SizedBox(
height: 24,
width: 24 * 1.7,
child: Stack(
alignment: Alignment.center,
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
child: const Icon(
Icons.account_circle_rounded,
),
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
child: const Icon(
Icons.account_circle_sharp,
),
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
),
],
),
),
Widget renders bottom to top.
I'm new on flutter and i have a problem.
When i click on the textformField, this one disappears
I put in red the container but normaly it's transparent
I put a stack, then in the background the GoogleMap which is extend. And to have a research effect I put an overlay with the textformfield and I will have specific filter buttons instead of the yellow and green.
The problem is that when I click on the textformfield, it disappears from the screen.
I tried to play with the SingleChildScrollView, ListView, but I still have errors especially because of GoogleMap which takes up all the space
Everything is contained by a Scaffold
Can you help me please, where to give me a solution?
I enclose the code below
cordially
return Stack(
children: [
/// GoogleMap
Column(
children: [
Expanded(
child: GoogleMap(initialCameraPosition: _kInitialPosition),
),
],
),
/// Search Bar And Filter
Positioned.fill(
bottom: _searchBarContainer,
child: SafeArea(
child: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: Row(
children: [
/// Search Bar
Expanded(
child: TextFormField(
decoration: DesignWidget.inputDecorationTexFieldMap(
_searchBarMap, Icons.search),
),
),
/// Filter
Container(
width: _filterContainer,
color: Colors.green,
child: Row(
children: [
Container(
color: Colors.yellow,
width: _filterContainer / 2,
),
Container(
color: Colors.green,
width: _filterContainer / 2,
)
],
),
),
],
),
),
),
),
),
],
);
simply user this pakage [material_floating_search_bar: ^0.3.4]
I think before you use textFormField you either have to define a key or controller.....it happens when you don't define an instance of controller and use that controller inside of textFormField controller.
Okay i found the solution
I need to add (to Scallfold) : resizeToAvoidBottomInset: false
I want to add a hover color property to a container using the inkwell widget but the container has its own border-radius and when I am using the hover property using inkwell it is taking its custom shape and making it look rectangle in shape after hovering on the inkwell.
Here's my code snippet:
InkWell(
onTap: () {},
hoverColor: Colors.red[200],
child: Container(
width: 70.w,
height: 60.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Row(
children: [
Image.asset(
'images/call.png',
height: 30.h,
),
Text(
'Call',
style: white,
),
],
),
),
),
I hope I made you understand the problem well
Please help me solve the issue or provide an alternate to it.
The Inkwell widget has a property customBorder of type ShapeBorder. You can use that to provide a borderRadius to your Inkwell.
E.g.:
customBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
The Inkwell widget has a property borderRadius of type BorderRadius
InkWell(
borderRadius: BorderRadius.circular(25),
// ...
);
OR
InkWell(
customBorder: CircleBorder(),
// ...
);
Simple and New Approach/Solution
I somehow agree with #Matthias's answer but if you need more realistic answer rather than giving RoundedRectangleBorder to customBorder property, then simply use CircleBorder() like an example below:
InkWell(customBorder: CircleBorder(), // ... );
InkWell(
borderRadius: BorderRadius.circular(12),
child: // ...
);
You can use the clip behavior to not have hard coded values when you have a widget that already has a border radius, eg a Card for example:
return Card(
clipBehavior: Clip.antiAlias,
child: InkWell(
To make splash also rounded, use suitable options of clipBehavior for Material widget.
I want to make this kind of input field.
I found a flutter_chip_input package in pubdev that already serve this functionality but it was kinda buggy. I have no time to wait for the next update of the plugin so I decided to move on and build it my self.
In web app, I can easily achieve this design using relative-absolute property in css and some javascript.
Yes, I already tried using Stack widget, but the problem is the Container (a wrapper of the white list in the bottom of the input field) won't stick to the bottom.
Whenever more content is loaded, the height grows to the top instead of going to the bottom, causing the input field to be hidden below the container.
I only need to know about how to make the list stick to the bottom of the input field and make the height grows to the bottom. I'll take care the rest of it.
Any clue? Please have a look at my current script:
#override
Widget build(BuildContext context) {
return Stack(
alignment: AlignmentDirectional.bottomCenter,
overflow: Overflow.visible,
children: [
TextFormField(
focusNode: _focusNode,
decoration: widget.decoration,
onChanged: (String query) {
print(query);
},
),
Positioned(
bottom: -30,
left: 0,
right: 0,
child: Container(
height: 100,
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: BorderRadius.circular(20),
),
child: Text('asdasdasd'),
),
),
],
);
}
Thanks in advance!
You can use OverlayEntry to make it float and CompositeTransformTarget and CompositeTransformFollower combined with LayerLink so the list will stick to the bottom of input.
You can read this article for example implementation
Flutter: Using Overlay to display floating widgets
Try using a searchDelegate widget if you're okay with it occupying the full screen. It's quite simple to use.
Docs here: https://api.flutter.dev/flutter/material/SearchDelegate-class.html
EDIT: My bad, it is not necessary to use it in the appBar. Call
showSearch(context: context, delegate: SearchDel()); from anywhere. It takes up the full screen tho.
If not, I'll have to add the code for the widget. Thought of some ways to make it.
How About This? without Stack juga bisa kok
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IntrinsicWidth(
child: Container(
constraints: BoxConstraints(
minWidth: 200,
),
child: TextFormField(
onChanged: (String query) {
print(query);
},
),
),
),
Container(
constraints: BoxConstraints(
minHeight: 100,
),
child: Column(
children: [
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: BorderRadius.circular(8),
),
child: Text('asdasdasd'),
),
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: BorderRadius.circular(8),
),
child: Text('asdasdasd'),
),
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: BorderRadius.circular(8),
),
child: Text('asdasdasd'),
),
]
),
),
],
),