I tried to build a small application with flutter.
I know how all the log things work in flutter I understand the logical concepts really good (state, context, route).
But I'm really bad at styling, it frustrates me. I feel like I can not put text on an image without causing a problem (usually find in google and never do alone).
I dont know what to do. i feel so bad with styling.
what to do?
code example I built with google 95% (I'm not okay with that :( )
InkWell(
onTap: () => selectManufacturer,
borderRadius: BorderRadius.circular(20),
child: Card(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
elevation: 9,
margin: EdgeInsets.all(10),
child: Stack(fit: StackFit.expand, children: [
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
"./image.png",
),
),
Positioned(
bottom: 100,
left: 0,
child: Column(children: [
Text(
widget.name,
style: TextStyle(fontSize: 26, color: Colors.red),
),
]))
]),
));
Styling is about the only thing I am "ok" at in Flutter, lol.
Here are my tips:
When you first layout a page, start with either a Column or a Row.
Then add an Expanded widget with a Container in it with a certain Color, different from other Colors.
You can repeat steps 1 and 2 recursively -- inside existing Expanded widgets-- to "drill down" and add even more detailed layout control
The tips above let you build little colored squares that show you how your layout will be before you jump into making it more complicated. By adding different sized "flex" attributes to each Expanded, you can tweak your layout from the start, before you make it more complicated.
In the HTML/CSS world, this approximates building a page with different colored DIVs.
I hope this helps!
Related
I want to show a progress bar with a button on the right side as in the image below. The margin on the left and right should be visually equal. Instead, the spacing on the right is larger than on the left. This is because the IconButton I'm using adheres to material design and has a bunch of extra space around it.
My code places the progress bar in a Row. Above it I also have a label in a Row. I want the right-aligned label to be aligned to the button. What's the correct way to align taking into consideration any padding that material design might have added?
Here's what my code looks like:
return Container(
padding: 10,
child: Column(
children: [
Row(children: [Text("Left aligned text"), const Spacer(), Text("Right aligned text")]),
const SizedBox(height: 10),
Row(children: [
Expanded(
child: LinearProgressIndicator(backgroundColor: Colors.darkBlue, color: Colors.blue, value: 55, minHeight: 20)),
IconButton(
icon: Icon(Icons.stop_circle_outlined),
padding: const EdgeInsets.all(0),
)
])
],
));
I don't think there is a way to do this. I wound up just making my own version of IconButton without the padding.
I need to customize the App bar like below, with rounded style and it floats on top of all other widgets:
Its similar to Google Map app. What would be the best way to achieve this customization?
Thanks for any advice or guides to approach this...
You can use Stack widget to display a widget on top of another widget (page content in your example). So use Stack to place search / app bar on top of main app content and customize as your needs.
You can check this youtube video to learn more about Stack widget.
Here's sample code, you can place inside Scaffold.
Stack(
children: <Widget>[
// this will be filled entire screen
Positioned.fill(child: Image.network('https://i.imgur.com/SJGDZUp.png')),
// this will be placed top of the screen with 15 points distance
Positioned(
top: 15,
left: 15,
right: 15,
// using SafeArea to avoid device frames (for example notch in iPhones)
child: SafeArea(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: Colors.black,
),
child: Text('Search...', style: TextStyle(color: Colors.white)),
),
),
),
],
),
DISCLAIMER: I haven't tested the code, so, it may contain syntax issues or typos
I have a rather easy problem, but which I cannot seem to solve efficiently.
So I have a row of a changing number of Containers with a centered Circle, for which I used a circle icon from the Font Awesome package. And what I want to do is to connect the sides of these circles so that they form a chain.
I though of creating a custom icon, a circle with a line to the side long enough to reach the next circle.
Another option would be to use Stack and manually place a line between the cirlces, but because the number of cicles is changing, I fear the that the line will overflow the circle boundries.
Any of ou have an idea how to solve this efficiently?
Edit:
So here is a picture of what I want it to be like:
Picture of the Chain
My Code right now is just
Row(
children: <Widget>[
Container(
child: Center( child: CircleIcon ),
),
Container(
child: Center( child: CircleIcon ),
), ...
You can just use Container for this. Really simple with Container.
Container{
height: 50, // give any height you need
width: 50, // give the same as height,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.black
),
),
}
I'm getting different results of the same screen when run on different phone sizes:
The second phone screen is my desired outcome. Using expanded initially helped me solve an issue with the first phone screen (where there was an extra space below the green bar). Later I realized that I was getting overflow on the second phone screen. Thus, I solved the overflow by using SingleChildScrollView. However that somehow cause the first phone screen to have the issue of the extra space again.
Code:
final quizBottomContentText = Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left:30.0, right:30.0, top: 30.0, bottom: 30),
child: Text(
questions[questionNum].title,
style: TextStyle(fontSize: 18.0),
)
);
final quizOptions = Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(bottom: 20.0),
child: Center(
child: Column(
children: questions[questionNum].options.map<Widget>(
(option) => SimpleRoundButton(
backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
buttonText: Text(option,
style: TextStyle(
color: Colors.white
),
),
textColor: Colors.white,
onPressed: (){},
),
).toList(),
)
)
);
final countdown = CountdownWidget(
width: MediaQuery.of(context).size.width,
duration: 20,
triviaState: triviaState,
);
final quizBottomContent = Expanded(
child: SingleChildScrollView(
child: Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: <Widget>[quizBottomContentText, quizOptions, countdown],
),
)
)
);
Because you're app is not responsive. See, you're passing size in a hard coded way
eg: padding: EdgeInsets.only(bottom: 20.0)
What this means? Mean that in your emulator, you'll get a result, maybe is what you expect, but in another device, maybe in a iPhone Xs Max, the result is diferent, so, what can you do?
You'll have two options here, the first, use the MediaQuery component. I'll show you how and why I use the way I use for a better understanding.
In Flutter, we have the MediaQuery component with a lot of propierty, one of them, is this: MediaQuery.of(context).size.width (Which gets your device's full width size). Everything fine till here, right? If you print this in diferent devices, you'll get diferente results, which means that a Padding with 20 from left/right will be different in both devices.
I made a calculation to kinda ''hack'' this and make it responsive, get this:
MediaQuery.of(context).size.width and divide by 400. Why 400? Me and a friend discovered this and when we divided, we've got a value almost next to 1 in very different devices, so, if you get the result (eg 1.5) and multiplies by 20, you'll make your app kinda of responsive. It's a way, the second way it's to use the LayoutBuilder which need a context and a constraints as parameters.
With constraints, you can manipulate to show differents model designs in differents devices, like, buildConventionalDesig for devices with width less than 400, an example, or buildBiggerDesign for a bigger phone, like iPhone Xs Max.
There's an article that you could be your reference to help you, check it:
Build Response UIs in Flutter. It doesn't cover this trick with MediaQuery, but maybe you can get a new insight.
Hope this have helped.
I am having a problem with the smoothness of my app animation.
I have 20 buttons on this page. If I press any of the buttons, the click effect is not running smoothly. The frame rate is very low. Is there any problem with the code or it is a bug?
Thanks in advance.
Here is a slightly streamlined version of your button builder method that properly contains the ink effect in the rounded rectangle shape, but that should not impact performance. Performance-wise, there is nothing wrong with your code.
Widget buildMaterialButton() {
return Expanded(
child: RawMaterialButton(
fillColor: Colors.blueGrey,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40.0)),
onPressed: () {},
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("1"),
),
),
);
}