I am a newbie for Flutter who comes from Web Development side. Just for fun and practice for Flutter layout, I wanted to make a "drum kit" application. But the problem is, I can not set Drum Kit parts as it should be.
You know in web development, there is position absolute option for the elements on the webpage. Is there anything like that for Flutter?
I'd appreciate any answers. Thanks. :)
Let me show what I expected : Here it is
This is what I got as a result: Result
Stack(
children: <Widget>[
Positioned(
top: 100,
left: 0,
right: 0,
child: Text("Search",
style: TextStyle(
color: Color(0xff757575),
fontWeight: FontWeight.w700,
fontFamily: "Roboto",
fontStyle: FontStyle.normal,
fontSize: 56.0),
textAlign: TextAlign.center),
),
]
)
you can try this You can fix position in the screen
The Stack widget and Positioned widget helps you achieve this:
According to the official documentation:
A Stack is a widget that positions its children relative to the edges of its box.
This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.
A Positioned is a widget that controls where a child of a Stack is positioned.A Positioned widget must be a descendant of a Stack.
Read more about the Stack widget here: Stack Widget
Read more about the Positioned widget here: Positioned Widget
Taking your example, you will need to create a Stack widget and the children property of the Stack widget should be your drum parts wrapped in a Positioned widget. The Positioned widget should only be used in the Stack widget.
You can use Stack class, which will have a Positioned class
How does it help
Stack helps you have relative-layout
Positioned helps you adjust the item like absolute in web
Related
I think I've hared that there is a Widget the gets a Textstyle and a list of children. The children can be Text-Widgets or Icon-Widgets and get the defining styles (and with that the color of the Icon) from that parent.
But I can't find that anywhere.
Do I remember that correctly, and if, what Widget was that?
Or am I just wrong about that?
Edit:
I thought it was this, but it don't seam to work the way I thought:
return RichText(
strutStyle: StrutStyle.fromTextStyle(TextStyle(color: Colors.white, fontWeight: FontWeight.w500)),
text: TextSpan(
children: [
TextSpan(text: "Add Object"),
WidgetSpan(child: Icon(Icons.add))
]
),
);
You can make use of the DefaultTextStyle widget which receives a TextStyle entity and will apply it to descendant Text widgets (as long as the descendant Text widgets do not have explicit styles applied: https://api.flutter.dev/flutter/widgets/DefaultTextStyle-class.html
When talking about the icons as well, there is no dedicated widget for that since you would usually define that as part of your overall theme as ThemeData (usually provided in MaterialApp)
cv template and I want to edit it with flutter
Everything in Flutter is widgets, this image would be an Image widget in your Flutter app.
You can use Stack widget to put things over each other. so You can put image over an image by using Stack widget.
Unfortunately you can't edit text of an image in Flutter, Instead I would rather to edit this image (for putting image and editing text) by Photoshop for example and then implementing it as one piece widget in my Flutter app.
What I assess from your question is you want to have a layout like the one given in your link, right? For a circular image, you could use CircleAvatar. As for the text you could use the Text widget. Now put these widgets inside a Column or Row. You seem to be new to Flutter and I'd suggest you to get a good grip on the basics first. Anyhow, here's a little dummy code snippet you could extend to achieve what you're looking for
Column(
crossAxisAlignment: CrossAxisAlignment
.start, //if you want your widgets to align on left in your col
children: [
CircleAvatar(
radius: 70,
foregroundImage: AssetImage("pathToYourAssetImg"),
),
SizedBox(
height: 20, //set this to your intended value
),
Text( //you could also create a custom text widget and pass the arguments if you don't want to hardcode text widgets over & over again for all of your text
"yourText",
style: TextStyle(
color: Colors.black87,
fontSize: 20, //set this to your value
fontWeight: FontWeight.bold //if you want to have a bold text
),
),
],
);
When there is excess space between widgets, the flex property works as expected.
As mentioned in the documentation, the formula to use is as follows
remainingSpace * (flex / totalOfAllFlexValues)
But when you have to shrink the widgets, the flex property stops making sense.
Giving results like this.
Building on this, here the widgets overflow, so I use flex to shrink box 1 and 2
and while playing with the flex values, the following happens
class Caja extends StatelessWidget {
Color color;
int numero;
double ancho;
Caja(this.color, this.numero, this.ancho);
#override
Widget build(BuildContext context) {
return Container(
width: this.ancho,
height: this.ancho,
color: this.color,
child: Center(
child: Text(
this.numero.toString(),
style: TextStyle(
fontSize: 30.0
),
),
),
);
}
}
I user Flexible widget below
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(flex: 1, child: Caja(Colors.blue, 1, 200.0)),
Flexible(flex: 6, child: Caja(Colors.red, 2, 200.0)),
Caja(Colors.green, 4, 400.0),
],
)
Where does this new leftover space come from?
Can someone explain to me?
I changed the flex value of the second box to 1 - there was no white space. Then to 2 - there was no white space either. From a flex value of 3 upwards, there appears a white space and it gets bigger and bigger.
The documentation states, that a
"..., Flexible does not require the child to fill the available space."
If you examine the source code of the Flexible, the comments say:
"If non-zero, the amount of space the child's can occupy in the main
axis is determined by dividing the free space (after placing the
inflexible children) according to the flex factors of the flexible
children."
I think there might be a problem with the inflexible child - your green box. If you set the flex of your second box so high, you want your first box to be really small. But the flexible children just take the free space up to the inflexible child into consideration and not the free space after it.
In Flutter I am implementing "what's new" screens which will show a preview of the real screens in the app.
For that I reuse the screen Widgets in the "what's new" flow.
The preview will be shown in a smaller Container and not cover the whole screen.
I want to scale down the text sizes, line heights, etc. for all widgets within this Container to match the smaller bounds.
Is there a way to do this without individually adding a smaller style for every Widget separately?
e.g. scale down all fontSizes by 20% for a Widget child regardless of the size set in the theme
I found the solution. Wrapping the child widget tree with Transform.scale(...) will scale all the Widgets down the tree according to the supplied scale factor.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.scale(
scale: 0.9,
child: MyScaledWidgetTree(),
),
Container(
child: ...,
),
],
)
I am developing a flutter app to display speed itself. But sometime, the speed isn't rendered correctly in the UI. This doesn't happen always but happens say 5-10% of the time.
I tried to add another text field, with lesser size below it(just to debug), and the same text renders there correctly.
2 screenshots - One correct and one with the bug
I am using a column widget to display the text and this is how I am building the children list:
List<Widget> children = [];
children.add(Container(
child: Text(listenerSpeedText,
style: TextStyle(color: Colors.lightGreen, fontSize: 100.00)),
padding: EdgeInsets.only(bottom: 5.00)));
children.add(Text(
'digitalSpeed: ' + listenerSpeedText,
style: TextStyle(
color: Colors.red,
fontSize: 25.00,
),
));
return children;
Any help would be appreciated. I am not sure what is going on. Do I need to give extra width or height to container?