Flutter provides a rich and powerful library of basic Widgets. On top of this library, Flutter provides a Material style (the default Android visual style) and a Cupertino style (the iOS visual style).

Based on the Widget

To use the basic Widget library, you need to import:

import 'package:flutter/widgets.dart';
Copy the code
  • Text: This Widget lets you create a formatted Text.
  • Row,Column: These elastic-space layout class widgets allow you to use theRow) and vertical (Column) to create flexible layouts based on the Flexbox layout model in Web development.
  • Stack: Replaces linear layoutFrameLayoutSimilar),StackAllows child widgets to be stacked that you can usePositionedTo locate the child widgets relative toStackThe Stacks are based on the absolute Positioning model of Web development.
  • Container:ContainerAllows you to create rectangular visual elements,ContainerYou can decorate oneBoxDecoration, such as background, a border, or a shadow.ContainerIt can also have margins, padding, and constraints applied to its size. In addition,ContainerYou can transform it in three dimensions using matrices.

Material Widget

Flutter provides a rich set of Material components to help you build applications that follow Material Design. The Material application starts with the MaterialApp component, which creates some useful widgets at the root of the application, such as a Theme that configates the Theme of the application. Whether or not to use the MaterialApp is entirely optional, but it is a good practice to use it. In the previous example, we have used multiple Material components such as scaffolding, AppBar, FlatButton, and so on. To use the Material component, import it first:

import 'package:flutter/material.dart';
Copy the code

Cupertino Widget

Flutter also offers a rich set of Cupertino style widgets, although not as rich as the Material Widgets yet, they are still being improved. It is worth mentioning that in the Material Widget library, there are some widgets that can switch the presentation style according to the actual running platform, such as The MaterialPageRoute. It will use the default page switch animation on Android (bottom up), and on iOS (right to left). Since there is no example of a Cupertino Widget in the previous example, we will now implement a simple Cupertino page:

// Import cupertino Widget library import'package:flutter/cupertino.dart';

class CupertinoTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text("Cupertino Demo"),
      ),
      child: Center(
        child: CupertinoButton(
            color: CupertinoColors.activeBlue,
            child: Text("Press"), onPressed: () {} ), ), ); }}Copy the code

Here’s a screenshot of what the page looks like on the iPhoneX:

Here’s a screenshot of what the page looks like on an Android device:

conclusion

Flutter provides a wealth of widgets that you can use in real world development. Don’t be afraid that introducing too many Widget libraries will make your application installation package bigger. This is not Web development, dart will only compile the code you use at compile time. Since both Material and Cupertino are built on top of the base Widget library, if you introduce one of these into your application, there is no need to introduce flutter/widgets.dart because they are already introduced internally.