I am trying to create a horizontal bar that grows in colour strength given the numbers supplied to it in a flutter app. Does anyone have an idea?
You can use row with Expanded and Text
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
height: 10,
child: LinearProgressIndicator(
value: 200 / 425, //current / max
backgroundColor: Colors.blue.shade100,
color: Colors.blue,
),
),
),
),
Text("value")
],
),
Also you can use stack().
First make bar then on the top put Text() or what ever you want
Related
I want to split my box in two parts seperated by a divider line I tried something like this:
Card(
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.green,
width: 25.w-8-4,
child: const Text("box1")),
const VerticalDivider(
color: Colors.red,
width: 16,
thickness: 2,
),
Container(
color: Colors.indigo,
width: 75.w-8-4,
child: const Text("box2"),
)
],
)
)
using the sizer package. Subtracting -4 each because of margin of the card and -8 because of the verticalDivider. This results in this view:
But unfortunately I can't seem to see the vertical divider (space is just white?). And also it would be great to have a way to say, "please consume about 25% and 75% of the space" to the left and right container, of what is left after the divider line is drawn. Is there a way to put it like this? This would make it easier to use padding/margin at the containers too. Without having to subtract stuff from width of the containers respectively.
Thanks a lot
Have you considered using Expanded ?
return Row(
children:[
Expanded(
flex:25,
child: Container(
color: Colors.green,
child: Text('box1'),
),
),
Expanded(
flex:75,
child: Container(
color: Colors.blue,
child: Text('box2'),
),
),
],
);
Add the margin/padding accordingly.
here is the UI that I'm trying to build
but this is the output
I tried alignment also , but that also didn't working
but when setting a fixed height this is working fine
but I can't fill this using the fit parameter,
here is the code
Scaffold(
backgroundColor: kDarkTheme,
body: SafeArea(
child: Column(
children: [
const SizedBox(height: 10),
Row(
//code for top button
),
const SizedBox(height: 150),
Stack(
children: [
Center(
child: CircleAvatar(
radius: radiusSize + 5,
backgroundColor: kDarkCounterColor,
child: CircleAvatar(
backgroundColor: kDarkTheme,
radius: radiusSize,
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.only(top: 35),
child: Text(
'39',
style: GoogleFonts.italiana(
fontSize: 120, color: kDarkCounterColor),
),
),
),
],
),
const SizedBox(height: 15),
const Text(
'Tap To Count',
style: TextStyle(
fontFamily: 'Helvatica',
color: Color(0xff656158),
),
),
Expanded(
child: Align(
alignment: Alignment.bottomRight,
child: SvgPicture.asset(
kDarkThemeImage,
)),
)
],
),
))
this is the code
then the first error appears again. how could I fix this?
You are using the Expanded widget on a column that doesn't have a set size. Try adding MainAxisSize attribute to your column, like this:
Column(
mainAxisSize: MainAxisSize.max, // Add this like
children: [
...
This will make your column fit the whole available size on the previous widget (a scaffold for the whole screen). Then the expanded widget will fill the remaining space not used by the other widgets inside the column.
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
A DartPad example is here: https://dartpad.dev/cf6ab1d34f5b1022aa48ea8ced193de5.
I am trying to make a fraction display, but I cannot get the container that is the fraction bar to not expand to the entire screen. This is the code I have right now:
Center(
child: Column(
children: <Widget>[
Text("100"),
Container(
height: 2,
color: Colors.black,
),
Text("300"),
],
),
)
Use IntrinsicWidth:
IntrinsicWidth(
child: Column(
children: [
Text("100"),
Container(
height: 2,
color: Colors.black,
),
Text("300"),
],
),
)
Image of the problem, shown as colored rectangles
I want the first child of Column to be Flexible and the second to take up the entire remaining space. Apparently, this does not work.
I'm now aware that this is the expected behavior. I would appreciate a workaround.
I've tried using FittedBox on the first child instead of Flexible, but it didn't work as the content of the first child has unbounded width.
SizedBox(
height: 300,
width: 50,
child: Container(
color: Colors.black,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Container(
height: 100,
color: Colors.red,
),
),
Expanded(
child: Container(
color: Colors.blue,
),
),
],
),
),
);
I want to make the first child (i.e. A TextField) Flexible so that if the height gets too small, there are no ugly yellow-black overflow bars.
Update:
Below image shows what I really want to do, but it has the overflow issue because the first child isn't flexible.
shows what happens when I do use Flexible.
I'm using AnimatedContainer to change the height. I prefer not to use SizeTransition if possible.
Just replace your code with the next one (flexes ratio can be adjusted to the right one):
SizedBox(
height: 300,
width: 50,
child: Container(
color: Colors.black,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
flex:1
child: Container(
height: 100,
color: Colors.red,
),
),
Flexible(
flex:10
child: Container(
color: Colors.blue,
),
),
],
),
),
);