Fluent can realize the effect of circular rotation

design sketch

New adpicturewidget inherits from statefulwidget_ Adpicturewidgetstate class inherits from state < adpicturewidget >, the root layout is stack, and the code is as follows:

class AdPictureWidget extends StatefulWidget {
 @override
 _AdPictureWidgetState createState() => _AdPictureWidgetState();
}

class _AdPictureWidgetState extends State<AdPictureWidget>{
 @override
 Widget build(BuildContext context) {
  return Stack(
   children: <Widget>[
    ...
   ],);
 }
}

Pageview is similar to viewpager in Android. We can use pagecontroller to control the sliding behavior of pageview, such as setting sliding animation, making it slide to the specified page, etc. You can set onpagechanged to monitor page sliding, which is equivalent to the pagelistener in Android. The layout of each page can be set through the children attribute. In the example, each page contains a picture, which is loaded through the network. The code is as follows:

class _AdPictureWidgetState extends State<AdPictureWidget>{
 PageController _pageController = PageController();
 List _adPictures = [];
 @override
 void dispose() {
  _pageController.dispose();
  super.dispose();
 }
 @override
 Widget build(BuildContext context) {
  return Stack(
   children: <Widget>[
    PageView(
     children: _adPictures.map((json) {
      var adPicture = AdPicture.fromJson(json);//可以先忽略这个实体类
      return Image.network(
       adPicture.imageUrl,fit: @R_929_2419@Fit.fill,//使照片占满整个屏幕
      );
     }).toList(),onPageChanged: _onPageChanged,controller: _pageController,),],);
 }

 void _onPageChanged(int index) {
  ...
 }
}

A line at the bottom of the screen indicates that the small round dots can be directly handled by using the tabpageselector of fluent, and can be displayed at the bottom of the screen by using align. We only need to use the three properties of tabpageselector. Set the color when it is not selected through the color property and set the color when it is selected through selectedcolor. How to control whether it is selected or not? The answer is its controller property. We can directly new a tabcontroller class and assign it to the controller property. The code is as follows:

class _AdPictureWidgetState extends State<AdPictureWidget>
  with SingleTickerProviderStateMixin {
 TabController _tabController;
 ...
 @override
 void initState() {
  _tabController = TabController(length: 0,vsync: this);
  super.initState();
 }
 @override
 void dispose() {
  ...
  _tabController.dispose();
  super.dispose();
 }
 @override
 Widget build(BuildContext context) {
  return Stack(
   children: <Widget>[
    PageView(
     ...
    ),Align(
     alignment: Alignment(0.0,0.5),child: TabPageSelector(
      color: Colors.white,selectedColor: Colors.black,controller: _tabController,);
 }

The linkage between the two is very simple. It is called in the sliding callback of pageview_ The animateto method of tabcontroller can realize the linkage between the two. If you need to turn pages regularly, you need to use a timer class. The detailed code is as follows:

const timeout = const Duration(seconds: 2);
class _AdPictureWidgetState extends State<AdPictureWidget>
  with SingleTickerProviderStateMixin {
 ...
 Timer _timer;
 int _index = 0;
 @override
 void initState() {
  ...
  _timer = Timer.periodic(timeout,_handleTimeout);//一创建定时器就启动了，每过timeout时间就会调用_handleTimeout这个回调。
  super.initState();
 }
 @override
 void dispose() {
  ...
  _timer.cancel();
  super.dispose();
 }
 _handleTimeout(Timer timer) {
   _index++;
   _pageController.animateToPage(
    _index % (_adPictures.length),//跳转到的位置
    duration: Duration(milliseconds: 16),//跳转的间隔时间
    curve: Curves.fastOutSlowIn,//跳转动画
   );
   _tabController.animateTo(_index % (_adPictures.length));
 }

Assuming that there are only three pages, the principle of circular playback is to insert an original tail page at the beginning and an original home page at the end based on the original data (see the above two pictures may be more vivid). When the user slides to the current tail page, the program automatically slides it to the current second page. The sliding is very fast, which is insensitive to the user. Similarly, When the user slides to the current home page, the program automatically slides to the penultimate page. This method is also very common in Android.

• dependent third party libraries:

• code and file name:

///文件名：AdPictureWidget.dart
class AdPictureWidget extends StatefulWidget {
 @override
 _AdPictureWidgetState createState() => _AdPictureWidgetState();
}
const timeout = const Duration(seconds: 2);
class _AdPictureWidgetState extends State<AdPictureWidget>
  with SingleTickerProviderStateMixin {
 TabController _tabController;
 PageController _pageController = PageController();
 Timer _timer;
 List _adPictures = [];
 int _index = 0;
 @override
 void initState() {
  _tabController = TabController(length: 0,vsync: this);
  _timer = Timer.periodic(timeout,_handleTimeout);
  loadAdPictures();
  super.initState();
 }
 @override
 void dispose() {
  _tabController.dispose();
  _timer.cancel();
  _pageController.dispose();
  super.dispose();
 }
 @override
 Widget build(BuildContext context) {
  return Stack(
   children: <Widget>[
    PageView(
     children: _adPictures.map((json) {
      var adPicture = AdPicture.fromJson(json);
      return Image.network(adPicture.imageUrl,fit: @R_929_2419@Fit.fill);
     }).toList(),);
 }
 _handleTimeout(Timer timer) {
  if (_adPictures.length - 2 != 0) {
   _index++;
   _pageController.animateToPage(
    _index % (_adPictures.length - 2),duration: Duration(milliseconds: 16),curve: Curves.fastOutSlowIn,);
  }
 }
 void _onPageChanged(int index) {
  _index = index;
  if (index == 0) {
   _tabController.animateTo(_tabController.length - 1);
   _pageController.jumpToPage(_adPictures.length - 2);
  } else if (index == _adPictures.length - 1) {
   _tabController.animateTo(0);
   _pageController.jumpToPage(1);
  } else {
   _tabController.animateTo(index - 1);
  }
 }
 void loadAdPictures() async {
  dio dio = dio();
  Response<List> response = await dio
    .get("http://www.wanandroid.com/tools/mockapi/2511/getAdPictures");
  List res = response.data;
  if (res.length != 0) {
   res.insert(0,res[res.length - 1]);
   res.add(res[1]);
   setState(() {
    _adPictures = res;
    _pageController.jumpToPage(1);
    _tabController =
      TabController(length: _adPictures.length - 2,vsync: this);
   });
  }
 }
}

///文件名：AdPicture.dart
library adpicture;
import 'package:json_annotation/json_annotation.dart';
part 'AdPicture.g.dart';
///首页轮播图
@JsonSerializable()
class AdPicture {
 final String imageUrl; //图片链接
 AdPicture({
  this.imageUrl,});
 factory AdPicture.fromJson(Map<String,dynamic> json) =>
   _$AdPictureFromJson(json);
}

///文件名：AdPicture.g.dart
part of adpicture;
AdPicture _$AdPictureFromJson(Map<String,dynamic> json) {
 return AdPicture(imageUrl: json['imageUrl'] as String);
}

Map<String,dynamic> _$AdPictureToJson(AdPicture instance) => <String,dynamic>{
   'imageUrl': instance.imageUrl,};

summary

The above is the flutter introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support to our website! If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!