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

Flutter PageView how to achieve left and right sliding to switch views, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

For everyone to share the flutter PageView left and right slide to switch views of the specific code for your reference, the details are as follows

Import 'dart:math';import' package:cached_network_image/cached_network_image.dart';import 'package:flutter/cupertino.dart';import' package:flutter/material.dart';import 'package:flutter_x/base/base_appbar_page.dart';class LeftPageViewPage extends StatefulWidget {@ override State createState () {return new LeftPageViewPageState ();}} class LeftPageViewPageState extends BaseAppBarPageState {@ override String buildInitState () {buildBackBar ("pageView", backIcon: Icons.arrow_back_ios); return null } final _ controller = new PageController (); static const _ kDuration = const Duration (milliseconds: 300); static const _ kCurve = Curves.ease Final List _ pages = [new ConstrainedBox (constraints: const BoxConstraints.expand (), child: new CachedNetworkImage (width: double.infinity, height: double.infinity, fit: BoxFit.fill, imageUrl: "http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg", placeholder: (context, url) = > new SizedBox (width: 24.0, height: 24.0, child: new CircularProgressIndicator (strokeWidth: 2.0,), errorWidget: (context, url, error) = > new Icon (Icons.error) ), new ConstrainedBox (constraints: const BoxConstraints.expand (), child: new CachedNetworkImage (width: double.infinity, height: double.infinity, fit: BoxFit.fill, imageUrl: "http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg", placeholder: (context, url) = > new SizedBox (width: 24.0, height: 24.0, child: new CircularProgressIndicator (strokeWidth: 2.0,), errorWidget: (context, url, error) = > new Icon (Icons.error)) ), new ConstrainedBox (constraints: const BoxConstraints.expand (), child: new Stack (/ / Stack is cascading layout control) Ability to cascade child controls / / alignment: this parameter determines how to align child widget that is not positioned (without using Positioned) or partially positioned. The so-called partial positioning, here specifically refers to no positioning on a certain axis: left, right is the horizontal axis, top, bottom is the vertical axis, as long as it contains a positioning attribute on the axis, there is positioning on the axis. Alignment: AlignmentDirectional.topStart, children: [new CachedNetworkImage (width: double.infinity, height: double.infinity, fit: BoxFit.fill, imageUrl: "http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg", placeholder: (context, url) = > SizedBox (width: 24 height: 25 child: CircularProgressIndicator (strokeWidth: 2.0,), errorWidget: (context, url, error) = > new Icon (Icons.error), new Align (alignment: Alignment.bottomCenter) Child: new Container (margin: EdgeInsets.only (bottom: 80.0), child: FlatButton (onPressed: () {}, child: Text ("experience now")),),],),] @ override Widget buildWidget (BuildContext context) {/ / TODO: implement buildWidget return new Stack (children: [/ / pageViw PageView.builder (physics: new AlwaysScrollableScrollPhysics (), controller: _ controller, itemBuilder: (BuildContext context, int index) {return _ pages [index] }, / / number of entries itemCount: _ pages.length,), / / dot indicator new Positioned (bottom: 0.0, left: 0.0, right: 0.0, child: new Container (color: Colors.white, padding: const EdgeInsets.all (20.0), child: new Center (child: new DotsIndicator (controller: _ controller, itemCount: _ pages.length, onPageSelected: (int page) {_ controller.animateToPage (page, duration: _ kDuration, curve: _ kCurve,) }),],);}} class DotsIndicator extends AnimatedWidget {DotsIndicator ({this.controller, this.itemCount, this.onPageSelected, this.color: Colors.red,}): super (listenable: controller); / / The PageController that this DotsIndicator is representing. Final PageController controller; / The number of items managed by the PageController final int itemCount; / Called when a dot is tapped final ValueChanged onPageSelected; / The color of the dots. / Defaults to `Colors.white`. Final Color color; / / The base size of the dots static const double _ kDotSize = 8.0; / / The increase in the size of the selected dot static const double _ kMaxZoom = 2.0; / / The distance between the center of each dot static const double _ kDotSpacing = 25.0; Widget _ buildDot (int index) {double selectedness = Curves.easeOut.transform (max (0.0,1.0-(controller.page??) Controller.initialPage)-index). Abs (),); double zoom = 1.0 + (_ kMaxZoom-1.0) * selectedness; return new Container (width: _ kDotSpacing, child: new Center (child: new Material (color: color, type: MaterialType.circle, child: new Container (width: _ kDotSize * zoom, height: _ kDotSize * zoom, child: new InkWell (onTap: () = > onPageSelected (index),) } Widget build (BuildContext context) {return new Row (mainAxisAlignment: MainAxisAlignment.center, children: new List.generate (itemCount, _ buildDot),);}}

After reading the above, have you mastered how flutter PageView can swipe left and right to switch views? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.