What Are Widgets?
Introduction
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.Anyway lets not put the cart before the horse yet. Lets talk about the problem of creating a slick userinterface and the how design languages attempt to provide a solutionsm to these recurring problems.
User Interface Design Languages
Designing user interfaces is difficult but many user interfaces follow the same pattern. Just a couple of examples of out hundreds of patterns:
- Confirmation Box: you need the user to confirm that they really want to do something, a popup confirmation box with a 'yes' or 'no' may be used. Example: do you really want to delete this customer?
- Master Detail: you need to select something and see a list of 'things' related to that something. Example: select a customer from a list of customer and see a list of their orders underneath.
- Password Strength Meter. Example: you enter a password and it graphically shows you how strong the password is.
So you have these recurring problems and solutions to them.
Huge companies like Google and Apple have had to write the user interfaces from scratch to enable developers to write software that has effective user interactions. So they were/are charged with addressing these recurring problems with their own patterns. Each company hired their own user interface gurus and came up with a complete solution to building a cohesive user interface, addressing the usability problems with their patterns. That is what a design language is.
Since these companies are coming up with their own solutions to the same problem, you can see many similarities between them. Also note how these companies use different 'looks' and 'colors', that match their companies philosphies. For example, Apple's design language is more 'flat' (like a flat surface) than Google's material design because Apple feels that the content is more important and that fewer distractions are required.
User Interface: Material
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.
You may find it strange that this article lists out the Cupertino widgets but not the Material widgets. There is a reason for this: we will be concentrating on the Material widgets in the upcoming articles. So we will introduce them soon!
User Interface: Cupertino
Apple (based in Cupertino) 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 much time on them. However, it is good to know that they exist and are available. Lets introduce some of them now and list them so that you can look at them in the future.
CupertinoApp
Flutter includes a CupertinoApp Widget, which is similar to MaterialApp in that it serves as the foundation for a app that uses that design look and feel.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: HomeScreen(),
);
}
}
You can then use the following Widgets with the CupertinoApp Widget:
- CupertinoPageScaffold: A standard page layout that is similar to Scaffold and includes nav bars.
- CupertinoPageRoute: Routes between an app page that transition in an iOS-specific way.
- CupertinoTextThemeData: iOS-specific themes.
- CupertinoActionSheet
- CupertinoActivityIndicator
- CupertinoAlertDialog
- CupertinoButton
- CupertinoDatePicker
- CupertinoDialog
- CupertinoFullscreenDialogTransition
- CupertinoPageTransition
- CupertinoPicker
- CupertinoPopupSurface
- CupertinoSegmentedControl
- CupertinoSlider
- CupertinoSwitch
- CupertinoNavigationBar
- CupertinoTabBar
- CupertinoTabScaffold
- CupertinoTabView
- CupertinoTextField
- CupertinoTimerPicker