I was inspecting Material UI for Angular 5 and didn't see any layout related css as part of the framework similar to Material UI for angual v1.x. Is there a way to achieve this or do I have to use some other css framework for layout & positioning.
I think you're referring to the Angular Flex Layout.
Related
I recently find that flutter supports material design 3 by enabling the useMaterial3 in ThemeData. However, when I try to use the Badge component from material design 3, it could not be found, and I also cannot find too much information about the newly introduced components in material design 3. Can I please get some guidance on it? Is there any list of components from material design 3 can be used? Thank you.
You can start using Material 3 Badge widget in Flutter 3.7.
Ref: https://medium.com/flutter/whats-new-in-flutter-3-7-38cbea71133c
I'm trying to export a very basic XD layout to a Flutter project.
I'm using two component instances, drag-and-dropped from the Material Design light theme UI kit in library.
After exporting it, I get the following error for both instances:
"Master component could not be found".
When trying to reach the master component for either instance (pressing ctrl-shift-K), nothing happens. What should I do to export this layout to Flutter?
It seems to me that you can't use a UI kit widget (at least not out of the box). Is it correct?
I don't think that you can use a UI kit widget out of the box, but you can use the underlying widget. In your case, you would use the MaterialButton widget.
As far as I know Flutter have build in widget system that named material and cupertino. But is there any other widgets sets. I want to build site with Flutter but do not want to make it look as mobile app.
No there isn't any other widget set. Flutters material and cupertino are ment to get your app a native look. They don't have any special functionality than visual design.
If you just want to do your own styling and elements, you can build your widgets by your own. You can read more about it here:
https://www.raywenderlich.com/10126984-creating-reusable-custom-widgets-in-flutter
How can I build responsive layouts in Flutter like bootstrap or angular flex layout?
BootStrap: https://getbootstrap.com/docs/4.0/layout/overview/
Angular Flex Layout: https://tburleson-layouts-demos.firebaseapp.com/#/docs
Flutter has a different layout system from HTML.
There's no strict equivalent to this. Instead that feature is spread across the entire catalog of widgets.
Some of these widgets are:
Row/Column combined with MainAxisAlignment and Expanded, for single line "flexbox"
Wrap for flexboxes that wraps
GridView for regular grids
CustomMultiChildLayout for advanced grid templates
LayoutBuilder for layouts that depends on the size available (avoid MediaQuery)
i am building web app for desktops and i find material-ui wastes lot of space when displaying the components right out of the box.
AppBar is rendered with padding of 24.
Passing the style to the appbar is only adding in addition to 24 instead of overriding.
Just compare the height of menubar of stackoverflow vs material-ui appbar
How to reduce AppBar height atleast 10px less?
You can override component style. You need to apply a className or a style like this :
<AppBar className={classes.appBar} />
With web inspector, you can find your css class. Something like MuiAppBar-XXXXXX
Hope this help!