How To Create Pageview Widget Swipeable View In Flutter

admin_img Posted By Bajarangi soft , Posted On 22-09-2020

PageView widget in flutter is used to make Swipeable widget list. PageView widget support both Vertical and Horizontal swipeable scrolling. In PageView widget each child widget should be in same as Parent View port. If your parent widget size is full screen then it will make the swipeable widgets full screen.

How To Create Pageview Widget Swipeable View In Flutter

Step 1
 The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.

Step 2
The image added inside the assets/images folder won't be accessible until we list it in the assets section of our pubspec.yaml file. In step 2, list the image file under the assets section of pubspec.yaml as shown below
flutter: 
  assets: 
   - assets/images/

complete Code For Pageview Widget Swipeable View In Flutter
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home:  Scaffold(
            body: Stack(
              children: [
                SafeArea(child:Page(),),
                Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
                      child:  Positioned(
                        child: AppBar(
                          leading: Icon(Icons.chevron_left),
                          title: Text("PageView Widget"),
                          backgroundColor: Colors.transparent,
                          elevation: 0,
                        ),
                      )
                    ),
                  ],
                )
              ],
            )
        ),
    );
  }
}

class Page extends StatefulWidget {
  PageState createState() => PageState();
}

class PageState extends State<Page>{

  final controller = PageController(
    initialPage: 0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(child:
          PageView(
            controller: controller,
            onPageChanged: (page)=>{ print(page.toString()) },
            pageSnapping: true,
            scrollDirection: Axis.vertical,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/1.jpg'),
                    fit: BoxFit.cover,
                  ),
                ),
                child: Center(
                  child: Text(
                    'BajarangiSoft.com',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 30,
                    ),
                  ),
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/2.jpg'),
                    fit: BoxFit.cover,
                  ),
                ),
                child: Center(
                  child: Text(
                    'BajarangiSoft.com',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 30,
                    ),
                  ),
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/3.jpg'),
                    fit: BoxFit.cover,
                  ),
                ),
                child: Center(
                  child: Text(
                    'BajarangiSoft.com',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 30,
                    ),
                  ),
                ),
              ),
          ],
        ),

        )
    );
  }
}

Related Post