Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use Flutter to achieve the App function guide page, the editor thinks it is very practical, so share it for you to do a reference, I hope you can get something after reading this article.

The App function introduction page is mainly composed of several pictures introducing the app function and the current page indicator, with the following effect

Let's implement the above interface step by step, swiping left and right to switch the display function page, which can be realized through PageView. The indicator at the bottom is translucently covered on PageView. Students who have developed Android know that they can be implemented with Framelayout layout. There is also a similar control Stack on Flutter. Let's complete the skeleton code first.

/ / An highlighted blockvoid main () = > runApp (App ()); class App extends StatelessWidget {@ override Widget build (BuildContext context) {return MaterialApp (title: 'Title', theme: ThemeData (primarySwatch: Colors.blue,), home: AppFuncBrowse (),);} class AppFuncBrowse extends StatefulWidget {@ override _ AppFuncBrowseState createState () {return _ AppFuncBrowseState () }} class _ AppFuncBrowseState extends State {@ override Widget build (BuildContext context) {return Scaffold (body: Container (color: Colors.white, child: Stack (children: [],),);}}

AppFuncBrowse is our functional introduction page. After compiling and running the function above, let's start to switch the functional introduction page. PageView mainly has two types of construction functions, one is lazy loading page (suitable for many pages), and the other is suitable for one-time loading of a small number of pages. Our example shows three pages. Simply in this way, PageView uses PageController to control which page is displayed. Define it first.

Class _ AppFuncBrowseState extends State {PageController _ pageController = PageController (); / / omit.}

With PageController, we can create a PageView as follows

Widget _ createPageView () {return PageView (controller: _ pageController, onPageChanged: (pageIndex) {setState () {_ pageIndex = pageIndex; print (_ pageController.page); print (pageIndex);}) }, children: [Container (color: Colors.blue, child: Center (child: Text ('Page 1'), Container (color: Colors.red, child: Center (child: Text (' Page 2'), Container (color: Colors.green, child: Center (child: Text ('Page 3'),],) } @ override Widget build (BuildContext context) {/ / TODO: implement build return Scaffold (body: Container (color: Colors.white,// margin: EdgeInsets.only (top: MediaQuery.of (context) .padding.top), child: Stack (children: [_ createPageView (),],));}

At this point, we have completed a function page that can slide around, and the content of each page can be customized, usually a picture. For simplicity, we directly display Text here. So far, we still lack a page number indicator from the goal. We are very familiar with iOS and need to use UIPageControl. Unfortunately, Flutter has not provided the native control so far, so we can only implement it ourselves. In fact, it is very simple. The code is as follows:

_ createPageIndicator () {return Opacity (opacity: 0.7, child: Align (alignment: FractionalOffset.bottomCenter, child: Container (margin: EdgeInsets.only (bottom: 60), height: 40, width: 80, padding: EdgeInsets.all (0), decoration: BoxDecoration (color: Colors.grey, / / withAlpha (128), borderRadius: BorderRadius.all (const Radius.circular (6. 0)), child: GestureDetector (behavior: HitTestBehavior.translucent, onTapUp: (detail) = > _ handlePageIndicatorTap (detail), child: Row (key: _ pageIndicatorKey) MainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisSize: MainAxisSize.min, children: [_ dotWidget (0), _ dotWidget (1), _ dotWidget (2),]) }

At first glance, it feels very complicated, but it is actually very simple. Students who have studied the design pattern may see that, like the decorator pattern, the hierarchical structure of widget is similar to this pattern. This is also the power of Flutter. We can combine various effects with existing controls. First, we use Opacity controls to encapsulate child controls, set opacity to make them translucent, and then use Align to control its bottom alignment, in order to make it some distance from the bottom. Also need Container to package, in order to achieve rounded Container, the powerful decoration attribute on the stage, it can achieve a variety of decorative effects, here we achieve the effect is the gray background and rounded corners.

Now that we're done with these decorations, there are only three points left, and the three points are on the same level, so we use Row as the parent control, and Row has several attribute values to pay attention to.

MainAxisAlignment spindle alignment, the Row spindle is horizontal, the crossAxisAlignment spindle is vertically aligned, and the Row spindle is horizontal, so this field represents the size of the mainAxisSize spindle direction of the up-and-down alignment. For Row, the control corresponding to the width and Row is Column, which corresponds to the opposite of the above properties.

The other values of the above properties can be tested by yourself, which we use here.

MainAxisAlignment: MainAxisAlignment.spaceEvenly,mainAxisSize: MainAxisSize.min

Indicates that the distance between the left and right sides of the child control (including the parent control) is the same, and the width is kept to a minimum. Finally, let's implement three points. The corresponding point color of the current page needs to be different from that of other undisplayed pages. We need to record which page it is currently, so that the corresponding points can be displayed in highlight.

Class _ AppFuncBrowseState extends State {PageController _ pageController = PageController (); int _ pageIndex = 0

And then you can create a point.

_ dotWidget (int index) {return Container (width: 10, height: 10, decoration: BoxDecoration (shape: BoxShape.circle, color: (_ pageIndex = = index)? Colors.white70: Colors.black12);}

By sliding PageView, you need to update _ pageIndex to update the color of the corresponding point on the current page.

Return PageView (controller: _ pageController, onPageChanged: (pageIndex) {setState (() {_ pageIndex = pageIndex; print (_ pageController.page); print (pageIndex);});}

OnPageChanged is the event of PageView page change. You need to call setState to make Widget rebuild and update the point color of the current page. So far, only the click update PageView function is left. Let's implement the click function, that is, to monitor the click gesture. The code is as follows.

_ handlePageIndicatorTap (TapUpDetails detail) {RenderBox renderBox = _ pageIndicatorKey.currentContext.findRenderObject (); Size widgeSize = renderBox.paintBounds.size; Offset tapOffset = renderBox.globalToLocal (detail.globalPosition); if (tapOffset.dx > widgeSize.width / 2) {_ scrollToNextPage ();} else {_ scrollToPreviousPage ();}}

The gesture has an attribute behavior that needs to be noted. The default value is deferToChild. The specific values are as follows:

Behavior: HitTestBehavior.translucent controls the click area of the response: translucent represents the whole area, the obscured sub-view can also respond to opaque to represent the whole region, and the obscured sub-view can not respond to deferToChild means click to the sub-view to respond. The gesture defaults to behavior.

We need to click the left half of the page forward and the second half of the page backward. We need to determine the area currently clicked. We need to find the RenderObject of Row to obtain the control area, and then obtain the offset of the click relative to the control to determine. For more information, see the code. _ pageIndicatorKey is the key passed to Row. The definition is as follows.

Class _ AppFuncBrowseState extends State {PageController _ pageController = PageController (); int _ pageIndex = 0; GlobalKey _ pageIndicatorKey = GlobalKey ()

Now all that's left is the code to turn the page back and forth, as follows

_ scrollToPreviousPage () {if (_ pageIndex > 0) {_ pageController.animateToPage (_ pageIndex-1, duration: const Duration (milliseconds: 200), curve: Curves.ease);}}

On "how to use Flutter to achieve App function guide page" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.