App Intro Demo with PageView in Flutter

The PageView widget in Flutter is used to display a scrollable view of multiple pages. Each page is represented by a widget that is built on demand as it is scrolled into view. 

The PageView widget is commonly used to implement image galleries, carousels, and swipeable screens in mobile apps.

Code Sample:


import 'package:flutter/material.dart';

class PageViewDemo extends StatelessWidget {
  final List _pages = [
    Container(color: Colors.blue),
    Container(color: Colors.red),
    Container(color: Colors.green),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PageView Demo')),
      body: PageView(
        children: _pages,
      ),
    );
  }
}

Properties:

  • children (required): A list of widgets that represent the pages to be displayed in the PageView.
  • scrollDirection: The axis along which the pages are scrolled. Default is horizontal.
  • pageSnapping: Whether the pages should snap to the start/end of the viewport or be free-flowing. Default is true (snap to start/end).
  • controller: A controller that can be used to control the page view programmatically, for example, to jump to a specific page.
  • physics: The physics of the scrollable widget. Default is PageScrollPhysics.
  • onPageChanged: A callback function that is called when the currently displayed page changes.
  • allowImplicitScrolling: Whether the PageView should allow implicit scrolling when a user scrolls beyond the end of the list. Default is false.
  • dragStartBehavior: Determines the behavior of the widget when the user starts dragging it. Default is DragStartBehavior.start.

..

App into demo : This Flutter code sample demonstrates how to create an app intro using PageView widget to display images, titles, and descriptions for each page.


import 'package:flutter/material.dart';

class AppIntro extends StatefulWidget {
  const AppIntro({super.key});

  @override
  AppIntroState createState() => AppIntroState();
}

class AppIntroState extends State <AppIntro>{
  // Create a PageController to control the PageView
  final PageController _pageController = PageController(initialPage: 0);

  // Define the pages of the app intro as a list of maps
  final List _pages = [
    {
      'image': 'assets/images/flutter_fly.png',
      'title': 'Welcome to My App',
      'description': 'This is a description of my app'
    },
    {
      'image': 'assets/images/flutter_fly.png',
      'title': 'Explore Features',
      'description': 'Here is a brief overview of what the app can do'
    },
    {
      'image': 'assets/images/flutter_fly.png',
      'title': 'Get Started',
      'description': 'Let\'s get started!'
    }
  ];

  // Track the index of the current page
  int _currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [

            // Create a PageView to display the intro pages
            PageView.builder(
              controller: _pageController,
              itemCount: _pages.length,
              onPageChanged: (index) {
                setState(() {
                  // Update the current page index when the page changes
                  _currentPageIndex = index;
                });
              },
              // Build each page using the data in the _pages list
              itemBuilder: (BuildContext context, int index) {
                return Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset(
                      _pages[index]['image'],
                      height: 250,
                      width: 250,
                    ),
                    const SizedBox(height: 32.0),
                    Text(
                      _pages[index]['title'],
                      style: const TextStyle(
                        fontSize: 24.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 16.0),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 32.0),
                      child: Text(
                        _pages[index]['description'],
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          fontSize: 16.0,
                        ),
                      ),
                    ),
                  ],
                );
              },
            ),
            // Add circles to indicate the current page
            Positioned(
              bottom: 32.0,
              left: 16.0,
              child: Row(
                children: [
                  for (int i = 0; i < _pages.length; i++)
                    Container(
                      margin: const EdgeInsets.symmetric(horizontal: 8.0),
                      height: 12.0,
                      width: 12.0,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: i == _currentPageIndex
                            ? Theme.of(context).primaryColor
                            : Colors.grey.shade300,
                      ),
                    ),
                ],
              ),
            ),
            // Add a button to move to the next page or get started
            Positioned(
              bottom: 32.0,
              right: 16.0,
              child: _currentPageIndex == _pages.length - 1
                  ? ElevatedButton(
                onPressed: () {
                  // Handle Get Started button tap
                },
                child: const Text('Get Started'),
              )
                  : IconButton(
                onPressed: () {
                  // Move to the next page when the arrow button is tapped
                  _pageController.nextPage(
                    duration: const Duration(milliseconds: 500),
                    curve: Curves.easeInOut,
                  );
                },
                icon: const Icon(Icons.arrow_forward),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

..

Comments

Post a Comment