This time I will show you what a Flutter Widget is; And how to use stateless widgets, or stateless widgets, in Flutter.

As for Flutter, in layman’s terms it allows developers to build both Android and IOS applications using a simple set of code.

features

The widgets are the basic building blocks of the Flutter application. Each one is an immutable declaration and part of the user interface. For example, button, text, color and layout padding.

Let’s look at an instance of Flutter_github.

The circled item has only two pieces of information, head and name. To avoid code duplication, separate it into a separate widget, as shown below

class FollowersItemView extends StatelessWidget {
  final GestureTapCallback tapCallback;
  final String avatarUrl;
  final String name;
 
  const FollowersItemView(
      {Key key, this.avatarUrl, this.name, this.tapCallback})
      : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    returnSymmetric (Horizontal: 15.0), Child: GestureDetector(Behavior: HitTestBehavior.opaque, onTap: tapCallback, child: Column( children: <Widget>[ Row( children: <Widget>[ FadeInImage.assetNetwork( placeholder:'images/app_welcome.png', image: avatarUrl, width: 80.0, height: 80.0,), Expanded(Child: Padding(Padding: EdgeInsets. Only (left: 15.0), child: Text(name, overflow: textoverflow. ellipsis, maxLines: 1, style: TextStyle(color: Colors. Grey [600], fontWeight: fontWeight. Bold,),),),),),),), EdgeInsets. Symmetric (vertical: 15.0), child: Divider(thickness: 1.0, color: colorEAEAEA, height: 1.0, endIndent: 0.0,),),],),),); }}Copy the code

It inherits from the StatelessWidget, which is stateless and immutable. And that’s exactly the property of the part that we’re going to extract. The removed parts need to be displayed with heads and names without any formal interaction changes. The only interaction is a click, but it doesn’t involve changing the data. So you define the data as final in your code. Nature is like a Text widget, with no internal properties changing over time like input Text or animated widgets.

Since nothing has changed, we can also define its constructor as const.

With the above part pulled away, we can use the stateless part directly in the ListView

  @override
  Widget createContentWidget() {
    returnRefreshIndicator( onRefresh: vm.handlerRefresh, child: Scrollbar( child: ListView.builder( padding: EdgeInsets. Only (top: 15.0), itemCount: the vm. The list? .length ?? 0, itemBuilder: (BuildContext context, int index) { final item = vm.list[index];return FollowersItemView(
                avatarUrl: item.avatar_url,
                name: item.login,
                tapCallback: () {
                  Navigator.push(context, MaterialPageRoute(builder: (_) {
                    returnWebViewPage(title: item.login, url: item.html_url); })); }); }),),); }Copy the code

Reference the FollowItemView in the ListView and pass in unchanged data.

Presents the principle of

Now that everyone knows how to use a StatelessWidget, how does it get called?

Let’s look at how it works.

As mentioned in the beginning, widgets are used as the basis for building Flutter applications. In Flutter, we refer to the building of widgets as Widget Tree. It’s like a blueprint for the application, and we create the blueprint, and then we internally create the elements that are displayed on the screen. It contains configuration information for the corresponding widget on the blueprint. So there’s an Element Tree.

Each StatelWidget has a StatelessElement, and the createElement() method creates the instance internally

  @override
  StatelessElement createElement() => StatelessElement(this);
Copy the code

The blueprint Widget built in the StalessWidget is also retrieved in StatelessElement via the buid() method and the elements are displayed on the screen.

The interaction between Widget Tree and Element Tree is as follows

StatelessElement in FollowerItemView calls the build method to see if it has any children, and if so, the children will create their own Element and install it into the Element tree.

So our program has two corresponding trees, one representing the Element displayed on the screen; The other tree represents its blueprint widgets, which are made up of many widgets.

What we developers do is build these different widgets into the applications we need.

Finally, let’s take a look at the initial installation entry.

void main() {
  runApp(GithubApp());
}
Copy the code

In our main file, we have a main function that calls the runApp method and passes in GithubApp. So what is GithubApp?

class GithubApp extends StatefulWidget {
  @override
  _GithubAppState createState() {
    return _GithubAppState();
  }
}
 
class _GithubAppState extends State<GithubApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Github',
      theme: ThemeData.light(),
      initialRoute: welcomeRoute.routeName,
      routes: {
        welcomeRoute.routeName: (BuildContext context) => WelcomePage(),
        loginRoute.routeName: (BuildContext context) => LoginPage(),
        homeRoute.routeName: (BuildContext context) => HomePage(),
        repositoryRoute.routeName: (BuildContext context) => RepositoryPage(),
        followersRoute.routeName: (BuildContext context) =>
            FollowersPage(followersRoute.pageType),
        followingRoute.routeName: (BuildContext context) =>
            FollowersPage(followingRoute.pageType),
        webViewRoute.routeName: (BuildContext context) => WebViewPage(title: ' ',)}); }}Copy the code

It turns out that Flutter is also a Widget. As stated at the beginning of this article, Flutter is made up of widgets. Main is the entry point to the program, and widgets in runApp are the starting point for the entire program to mount. It creates a root element with the same width and height as the screen and loads it into the screen.

So Flutter has always been built by creating an Element and then calling the Build method to retrieve its subsequent child widgets to build the application we see.

The code in this article comes from Flutter_Github, a Github client based on Flutter that supports both Android and IOS, including account passwords and authentication login. Dart language was used for development, and the project architecture was MSVM based on Model/State/ViewModel. Use Navigator to jump to the page; The network framework uses DIO. The project is being updated continuously, those who are interested can follow it.

Of course, if you want to learn about Android native, flutter_Github’s pure Android version AwesomeGithub is a good choice.

Next up

The Journey of Flutter from Scratch: StatefulWidget

If you like my article mode, or are interested in my next article, I suggest you follow my wechat official account: [Android supply station]

Or scan the qr code below to establish effective communication with me and receive my update push faster and more accurately.