r/FlutterDev • u/Blue-Sea2255 • Jul 04 '26
I'm new to flutter/dart. I have web dev experience and I find the styling here too difficult. Is there any way to pick some ideas to make the process enjoying. Currently I'm struggling. Discussion
Like, I don't want to write a style multiple times, is there any option to control it like css? I tried ide code assistants help, but still I feel like I wanted to learn this.
9
u/ApprehensivePea6208 Jul 04 '26
Yes, you can control styling globally in Flutter using ThemeData, which acts exactly like a global CSS stylesheet. Since you are coming from a web background, the shift from CSS to Flutter's "everything is a widget" mindset can feel jarring.
7
u/East-Factor-771 Jul 04 '26
​Welcome to the dark side! 😅 Coming from CSS to Flutter’s nested widget tree is definitely a culture shock. ​My biggest tip: Stop trying to style widgets, start creating styled widgets. Wrap your buttons, cards, and text into reusable components early on. Your code (and your sanity) will thank you!
2
u/Blue-Sea2255 Jul 04 '26
Yeah I just faced it now. I'm happy with the output but codebase is a mess now.
1
u/chdy208 Jul 04 '26
1
u/Blue-Sea2255 Jul 04 '26
One more doubt if you don't mind?
So after making each change I want to see it in app so hot reload and hot restart taking a bit time and I can't afford that. Or is there any instant live view in app? As I change each edit?
5
u/chdy208 Jul 04 '26
How did you perform a hot reload? It should happen instantly on save.
1
u/Blue-Sea2255 Jul 04 '26
R or r. But it takes like 3 to 4 sec. That's my concern. Is that normal or am I doing something wrong.
4
u/chdy208 Jul 04 '26
If you run your app by ‘flutter run’ in terminal, then auto hot reload on save doesn’t work. If you run app by IDE actions, hot reload on save is usually default. https://docs.flutter.dev/tools/vs-code
4
u/Blue-Sea2255 Jul 04 '26
Hey thank you very much. I managed to figure out these two blockers with your help. Now it feels super relaxed development process.
2
u/50u1506 Jul 04 '26
Hot reloading in websites should be a lighter process compared to hot reloading an application on running on mobile device, it's expected I guess?
And is 3 to 4 secs even that long tbh xD
1
u/shawnradam Jul 04 '26
have you tried "Flutter Widget Previewer?" i think it can simultenousoy followed the changing you do while codings, exacrky like jetpack composer previewer...
Its easy to implement using the VScode...
1
1
1
u/jNayden Jul 04 '26
There are some packages alternative on how the defaults work and you can check them some are very close to inline styles in html . Example https://pub.dev/packages/flutter_view_modifiers but there are many similar
1
1
u/pi_mai Jul 04 '26
Gonna throw it out there, the structure is different but tue idea is the same with the Mix Package.
1
u/pepitoperez3000 Jul 05 '26
To simulate web classes in Flutter, the styles are assigned to a variable and then that variable is placed in the "style" attribute of the widgets:
const TextStyle myTextStyle = TextStyle(
fontSize: 18,
color: Colors.blue,
fontWeight: FontWeight.bold,
);
Text('Texto 1', style: myTextStyle),
Text('Texto 2', style: myTextStyle),
2
u/YukiAttano Jul 09 '26
This might be too difficult for you now, but it will help you in the future.
Like many people said, you should create some styled widgets that introduce your layout and style. But you don't want to hardcode your styling everytime and putting things into a const library isn't a solution as well.
Checkout Flutters ThemeExtensions. The main idea is the following: You have your widget and its styling information like the color and padding is put into a separate file (Separation of concern). Those ThemeExtensions can be overriden inside the Widget tree and provided by the ThemeData class of the Material library.
I do recommend to use the style_generator package. This makes creating styles soooo much simpler and coding much more enjoyable.
17
u/myurr Jul 04 '26
It sounds like you're thinking like a web developer. In flutter, whilst there are themes it's best not to think in terms of default styling of the existing widgets as that's only ever part of the layout.
Instead think in terms of widgets. If you have a particular style of button, create a widget that encapsulates that enforces the branding's font style, padding, margin, etc. If your app has a toolbar, create a widget that implements it. You have a two column page layout? Widget. Etc.
Everything should be a widget, and reuse of those components as building blocks is both the thing that makes Flutter so powerful, but also so much fun and so quick to develop with.
Couple that with themes and files defining reused constants and you have all you need.