preface

‘ω •́)y’ is a ̀ ω •́)y logon page whose technology is very simple but can be used to move from simple to complex

The login page

The login page is believed to be involved in 99% of apps. This article will take you through a simple process ~

Recommended reading time: 20 minutes

rendering

01-sign-up-daily-ui-challenge

Final effect

Column

From the design, we can see that this is a page with vertically arranged widgets, so we can use Column. As Column is a basic control, I believe you can already use it very skillfully. I won’t expand it in detail here, but give a few 🌰 children.

mainAxisAlignment

MainAxisAlignment.spaceBetween

MainAxisAlignment.spaceEvenly

And so on. I won’t list them all

LoginPagePage design

Back to our login page development process, it can be seen that in portrait mode the whole page is simply arranged vertically as follows ~

The rational use ofSingleChildScrollView

In the design, we can see that a page is just completely displayed, but the actual situation is that we have to face mobile phones of various resolutions sometimes a page can not be completely displayed, at this time we should make the interface can scroll, and we should consider the problem of soft keyboard blocking, SingleChildScrollView should play a big role

SingleChildScrollViewintroduce

This Widget allows a Widget to scroll, and can also achieve some interesting effects

const SingleChildScrollView({
    Key key,
    this.scrollDirection = Axis.vertical,
    this.reverse = false,
    this.padding,
    bool primary,
    this.physics,
    this.controller,
    this.child,
    this.dragStartBehavior = DragStartBehavior.down,
  })
Copy the code

This article mainly explains reverse and primary, quoted from Flutter Chinese

  • Reverse: Indicates whether to slide in the opposite direction of the reading direction, for example: The value of scrollDirection is Axis. Horizontal. If the reading direction is left to right (depending on the locale, right to left in Arabic) and reverse is true, then the sliding direction is right to left. This property essentially determines whether the initial scroll position of a scrollable widget is “head” or “tail”. If false, the initial scroll position is “head” or “tail”.
  • Primary: Indicates whether to use the default PrimaryScrollController in the Widget tree. Primary defaults to true when the slide direction is vertical (scrollDirection value is Axis. Vertical) and controller is not specified.

Our current structure should be

SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[// picture // input box // input box //...] ))Copy the code

Soft keyboard occlusion problem

Since it involves the input box, then we have to say another problem, the soft keyboard occlusion problem.

Flutter

  1. ResizeToAvoidBottomInset – > bool

This property is used in our outer Scaffold and when this value is false, the soft keyboard eject does not trigger global resizing.

Scaffold(
     resizeToAvoidBottomInset: false,
     backgroundColor: Colors.white,
     body: _buildVerticalLayout()
);
Copy the code

Perfect? Nonono ~ we are clicking on the second input box this time, and the soft keyboard pops up blocking the TextField where we actually get the focus.

  1. SingleChildScrollView

Let’s wrap a SingleChildScrollView around the layout to make it scrollable, and now let’s see what it looks like.

Load different pages when switching between horizontal and vertical screens

The ability to switch between vertical and horizontal screens in A Flutter makes it easier to load different pages by combining different components. But how do we know about the vertical switch event?

OrientationBuilderTo help you

The Flutter provides a widget called OrientationBuilder that can rebuild the layout of a device when its orientation changes. OrientationBuilder has a Builder function to build our layout. The Builder function is called when the orientation of the device changes. There are two values of orientation: orientation. Landscape and orientation. Portrait.

A very simple component 😂 Again, Flutter is a component of everything ~ after our code modification

Scaffold(
        backgroundColor: Colors.white,
        body: OrientationBuilder(builder: (context, orientation) {
          return orientation == Orientation.portrait ? _buildVerticalLayout() : _buildHorizontalLayout();
}))
Copy the code

Afterword.

This blog post is very simple, I feel a little embarrassed to write it out, but I’m going to make all kinds of fun and interesting changes on this one landing page. I hope you have some fun. I’m 32 short of 50 likes from the nuggets community!

thanks

Because Chinese website

Flutter supports different screen sizes and orientations