Flutter Widgets

Widgets are really configuration objects rather than graphic objects. When you write a Widget, it is not just directly rendered on screen, it’s not as direct as that.
You write them and they configure the user interface then Flutter gets them rendered on screen.

User Interface: Material & Cupertino

Google has its own user interface design language called Material,
which is used in all Google products. If you look at a program running on an Android phone, chances are that the UI will have that look and feel.

Material Design, According to Google

Material Design is a system for building bold and beautiful digital
products. By uniting style, branding, interaction, and motion under a consistent set of principles and components, product teams can realize their greatest design potential.

Most Flutter Widgets Work with Material Design

As Flutter was written by Google, most Flutter widgets support the Material design look and feel. As most people are writing Flutter apps that implement the Material design look and feel, we are going to concentrate on the Flutter widgets that support that look and feel.

User Interface: Cupertino

Apple (based in Cupertono) is the other big player in mobile apps and it has its own user interface design language. Apple does not have a name for its design language (yet). Apple though has something called “Human Interface Guidelines”. These guidelines ensure that all iOS applications adhere to Apple’s design principles.

Flutter Includes iOS-Styled Widgets

Google has written many iOS-styled Widgets for Flutter developers so
that they can emulate native iOS apps. I have not used these Widgets, so I am not going to spend any time on them. However, it is good to know that they exist and are available. Here is a list:
CupertinoActionSheet
CupertinoActivityIndicator
CupertinoAlertDialog
CupertinoButton
CupertinoDatePicker
CupertinoDialog
CupertinoFullscreenDialogTransition
CupertinoPageScaffold
CupertinoPageTransition
CupertinoPicker
CupertinoPopupSurface
CupertinoSegmentedControl
CupertinoSlider
CupertinoSwitch
CupertinoNavigationBar
CupertinoTabBar
CupertinoTabScaffold
CupertinoTabView
CupertinoTextField

Conclusion

In this page (written and validated by A. Gawali) you learned about Flutter Widgets . What's Next? If you are interested in completing Flutter tutorial, your next topic will be learning about: Flutter Build widgets.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.