Content from Raywenderlich books flutter-apprentice
Uniquely updated and used for review of flutter-folio.
Post keywords:
flutter ui design, flutter ui, flutter course, widget tree, flutter stateful widget, package of the week, flutter app development, flutter widgets, flutter widget of the week, widget of the week, widgets flutter
As you know, everything in Flutter is a widget. But how do you know which widget to use when? In this article, you will explore three types of basic widgets that you can use to:
Structure and navigation
Displaying information
Positioning widgets
At the end of the article, you will use these different types of widgets to build the basis of an application called PageAdmin, which is a contact management application. You will build the structure of the application and learn how to create posts: homepage card, author card and explorer card.
Getting ready? In-depth understanding by viewing the project. You will find the link in the description.
Git clone https://github.com/sergejdergatsjev/PageAdmin.git
$ git clone https://github.com/username/repo.git
Username: your_username
Password: your_token
Everything in Flutter starts with a widget. runApp() accepts the root widget
Every stateless widget must override the build() method.
The AdminApp widget first combines a MaterialApp widget to give it the look and feel of the Material Design system.
The MaterialApp widget contains a Scaffold widget, which defines the layout and structure of the application. Scaffolding has two properties: appBar and body. The title of the Appbar contains a Text widget. The main body has a Center widget, and its child property is a Text widget.
Since Flutter is cross-platform, it is natural that Google's UI Toolkit supports the visual design systems of Android and iOS.
Android uses the Material Design system, you can import it like this
import 'package:flutter/material.dart';
For simplicity, the rule of thumb is to choose only one design system for your UI.
Now that you have finalized a design, you will set a theme for your application in the next section.
Setting a theme
You may notice that the current application using the default blue color looks a bit boring, so you can add interest to it with a custom theme! Your first step is to choose the font to use for your application.
Define the theme
To share colors and font styles throughout the application, you need to provide a ThemeData object to MaterialApp. In the lib directory, open themes.dart, which contains the predefined themes for the application.
Declare a TextTheme name AppTheme, which uses a predefined font size and weight. Most importantly, the color of the text is black.
Using the theme
To recap, this code:
Imported the AppTheme.
Defined a variable that holds the theme.
Read theme data the MaterialApp widget’s theme
Added MaterialApp text styling.
Finally, added them in constructor of MaterialApp
Save your changes. Due to the hot reload, you can see the updated theme almost immediately.
Next, you will understand an important aspect of building an application-understanding the application structure to be used.
App structure and navigation
Establishing the structure of the application from the beginning is important to the user experience. Applying the correct navigation structure allows your users to easily browse the information in your application.
The MaterialApp displays a Scaffold
https://flutter.github.io/assets-for-api-docs/assets/material/basic_material_app.png
/// This example shows how to create a [MaterialApp] that uses the [routes]
/// `Map` to define the "home" route and an "about" route.
///
/// ```dart
/// MaterialApp(
/// routes: <String, WidgetBuilder>{
/// '/': (BuildContext context) {
/// return Scaffold(
/// appBar: AppBar(
/// title: const Text('Home Route'),
/// ),
/// );
/// },
/// '/about': (BuildContext context) {
/// return Scaffold(
/// appBar: AppBar(
/// title: const Text('About Route'),
/// ),
/// );
/// }
/// },
/// )
See also:
Scaffold
https://api.flutter.dev/flutter/material/Scaffold-class.html
AppBar https://api.flutter.dev/flutter/material/AppBar-class.html
Drawer https://flutter.dev/docs/cookbook/design/drawer
Navigator which is used to manage the app's stack of pages.
https://api.flutter.dev/flutter/widgets/Navigator-class.html
MaterialPageRoute
Which defines an app page that transitions in a material-specific way.
https://api.flutter.dev/flutter/material/MaterialPageRoute-class.html
WidgetsApp which defines the basic app elements but does not depend on the material library.
https://api.flutter.dev/flutter/widgets/WidgetsApp-class.html
Material Components
For more information, check Flutter's documentation on Material Components widgets, including application structure and navigation:
https://flutter.dev/docs/development/ui/widgets/material
Setting up the Home widget
When you build a large application, you will start writing a ladder of widgets. Widgets composed of other widgets can become very verbose and confusing. For readability, it is a good idea to separate the widgets into separate files.
To avoid making your code too complicated, you will now create the first of these separate files.
Your new class extends StatefulWidget.
The AppBar style now reads: AppTheme theme = context.select((AppModel m) => m.theme);
ThemeData materialTheme = theme.toThemeData();
materialTheme = ThemeData(visualDensity: VisualDensity(horizontal: density, vertical: density));
return MaterialApp.router
Scaffold needs to handle some state changes through StatefulWidget. The next step is to move the code from main.dart to a new StatefulWidget called MainAppScaffold
In main_app_scaffold.
In the lib directory, create a new file named main_app_scaffold.dart and add the following content
If you are creating a very simple mobile application, you may need a bottom navigation bar. You can add a bottom navigation bar to the scaffolding. This will allow your users to navigate between tabs.
In this application we will not use bottom navigation but Drawer.
So this is another navigation bar for flutter applications.
That's a handy menu, for multiple options.
The display widget handles what the user sees on the screen. Examples of display widgets include:
Text
Image
Button
Layout widgets help to arrange the widgets. Examples of layout widgets include:
Container
Padding
Stack
Column
SizedBox
Row
Flutter has a large selection of layout widgets, but this article only covers the most common ones. For more examples, check out
https://flutter.dev/docs/development/ui/widgets/layout.
Comments
Post a Comment