Image Slider PageView In Flutter

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