Gagan5278/zz_animate_pkg

Flutter Package

An example of PageView with page index animation in Flutter. There is way to add images from assets and short description as well. Support for carousel animation too. Package support for local and network images both.

Features

Support local images added in assets. Support for network images. Loading progress anination for high resolution images. Ability to modify page index color, font, style etc.

Getting started

Create a flutter project and in your pubspec.yaml add below dependency

 zz_animate_pkg: ^0.0.6

Usage

First create a List of map<String, String> as below

Note: Images are added in 'assets/images/' folder under root directory. Don't forget to add in assets of your pubspec.yaml file.

 List<Map<String, String>> imagesModel = [{
    'message': 'Ipsum is simply dummy text',
    'image': '1.jpg',
  },
  {
    'message':
        'There are many variations of passages of Lorem Ipsum.',
    'image': '2.jpg',
  },
  {
    'message':
        'It is a long established fact that a reader will be distracted.',
    'image': '3.jpg',
  },........]

For network images, create a list of map<String, String> as below

const List<Map<String, String>> networkImagesModel = [
{
  'message': 'Ipsum is simply dummy text of the printing',
  'image': 'https://images.pexels.com/photos/624015/pexels-photo-624015.jpeg',
},
{
  'message':
      'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form',
  'image':
      'https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg',
},....

Inside you class, add below code for Local images

  void main() {
   runApp(const MyApp());
 }

class MyApp extends StatelessWidget {
   const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Pageview Demo',
      theme: ThemeData(
         primarySwatch: Colors.blue,
     ),
     home: PageViewScreen(
        imagesArray: imagesModel,
      ),
    );
  }
}

Screenshot

For adding viewPort support

  void main() {
   runApp(const MyApp());
 }

class MyApp extends StatelessWidget {
   const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Pageview Demo',
      theme: ThemeData(
         primarySwatch: Colors.blue,
     ),
     home: PageViewScreen(
        imagesArray: imagesModel,
        isViewFraction: true,
      ),
    );
  }
}

Screenshot

For network image support

  void main() {
   runApp(const MyApp());
 }

class MyApp extends StatelessWidget {
   const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Pageview Demo',
      theme: ThemeData(
         primarySwatch: Colors.blue,
     ),
     home: PageViewScreen(
        imagesArray: networkImagesModel,
        isNetowrkImage: true,
      ),
    );
  }
}

Additional information

HomeScreen parameters

isNetowrkImage: Bool Type: - By deafult 'false'. pass as 'true' value if network image support requires.
isViewFraction: Bool Type: - By deafult 'false'. Make 'true' if carusal view support requires.
cardCornerRadius: Double Type: - Default value is 8.0.
progressColor: Color Type: - Default value is 'red'. used as progress/animation color.
textStyle: TextStyle Type: - Text style of image's message.
viewportFraction: Double Type: - viewportFraction value of PageController. Default value is 0.8