Image Slider PageView In Flutter :
Main.dart
import 'package:flutter/material.dart'; import 'slider.dart'; void main() => runApp(new MyApp()); class MyApp extends StatefulWidget { @override MyAppState createState() { return MyAppState(); } } class MyAppState extends State<MyApp> { final _imageUrls = [ "", "", "", "" ]; @override Widget build(BuildContext context) { var title = "Flutter Tutorial Image Slider"; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: Text(title), ), body: Container( child: SliderWidget( imageUrls: _imageUrls, imageBorderRadius: BorderRadius.circular(8.0), ), ), ), ); } }
slider.dart
import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class SliderWidget extends StatefulWidget { final List<String> imageUrls; final BorderRadius imageBorderRadius; const SliderWidget({ Key key, @required this.imageUrls, @required this.imageBorderRadius, }) : super(key: key); @override ImageSliderWidgetState createState() { return new ImageSliderWidgetState(); } } class ImageSliderWidgetState extends State<SliderWidget> { List<Widget> _pages = []; final _controller = PageController(); @override void initState() { super.initState(); _pages = widget.imageUrls.map((url) { return _buildImagePageItem(url); }).toList(); } @override Widget build(BuildContext context) { return _buildingImageSlider(); } Widget _buildingImageSlider() { return Container( padding: EdgeInsets.all(8.0), child: Stack( children: [ _buildPagerViewSlider(), ], ), ); } Widget _buildPagerViewSlider() { return PageView.builder( physics: AlwaysScrollableScrollPhysics(), controller: _controller, itemCount: _pages.length, itemBuilder: (BuildContext context, int index) { return _pages[index % _pages.length]; } ); } Widget _buildImagePageItem(String imgUrl) { return ClipRRect( borderRadius: widget.imageBorderRadius, child: CachedNetworkImage( imageUrl: imgUrl, placeholder: (context, url) => new Center(child: CircularProgressIndicator()), errorWidget: (context, url, error) => new Icon(Icons.error), )); } }
pubspec.yaml
name: fluttertutorial
description: A new Flutter application.
version: 1.0.0+1
environment:
sdk: “>=2.1.0 <3.0.0”
dependencies:
flutter:
sdk: flutter
cached_network_image:
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in