Custom PageView

A highly customizable PageView widget with auto-scroll, navigation controls, and dot indicators for Flutter applications.

✨ Features

  • 🖼️ Multiple page support with smooth transitions
  • 🔄 Auto-scroll functionality with configurable interval
  • 🔘 Interactive dot indicators
  • ◀️ ▶️ Optional navigation buttons
  • 🎨 Fully customizable appearance
  • 📱 Responsive design
  • 👆 Page change callbacks

🛠 Installation

Add this dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_pageview: ^1.1.0

Then run:

flutter pub get

🚀 Basic Usage

CustomPageView(
  pages: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
  height: 300,
)

⚙️ Configuration Options

Parameter Type Default Description
pages List<Widget> required Pages to display
height double 250.0 Height of PageView
isAutoScroll bool true Enable auto-scrolling
autoScrollDuration int 3 Auto-scroll interval in seconds
isShowNextButtons bool false Show navigation buttons
isShowDotIndicator bool true Show page indicator dots
dotColor Color Colors.grey Color of inactive dots
activeDotColor Color Colors.blue Color of active dot
buttonSpacing double 20.0 Space between nav buttons
scrollDuration Duration 400ms Page scroll animation duration
scrollCurve Curve Curves.easeInOut Scroll animation curve
viewportFraction double 1.0 Fraction of viewport each page occupies
reverse bool false Reverse scroll direction
onPageChanged Function(int)? null Page change callback
previousButton Widget? null Custom previous button
nextButton Widget? null Custom next button

📝 Example Usage

CustomPageView(
  pages: List.generate(
    4,
    (index) => Container(
      margin: EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        color: Colors.primaries[index],
        borderRadius: BorderRadius.circular(12),
      ),
      child: Center(child: Text('Page ${index + 1}')),
  ),
  height: MediaQuery.of(context).size.height * 0.6,
  isAutoScroll: true,
  autoScrollDuration: 4,
  isShowNextButtons: true,
  dotColor: Colors.grey[300]!,
  activeDotColor: Colors.blueAccent,
  onPageChanged: (index) {
    print('Page changed to: $index');
  },
)

🏆 Best Practices

1. Performance Optimization

// Use const constructors for static pages
pages: const [
  MyPage1(),
  MyPage2(),
  MyPage3(),
],

// For dynamic content, use builders
PageView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) => MyDynamicPage(item: items[index]),
)

2. Accessibility

// Add semantic labels
previousButton: Semantics(
  label: 'Previous page',
  child: FloatingActionButton(...),
),

// Ensure proper contrast for indicators
dotColor: Colors.grey[400]!,
activeDotColor: Theme.of(context).primaryColor,

3. Responsive Design

height: MediaQuery.of(context).size.height * 0.5,  // 50% of screen height
viewportFraction: MediaQuery.of(context).size.width > 600 ? 0.8 : 1.0,

4. Error Handling

// Always check for empty pages
if (pages.isEmpty) {
  return Center(child: Text('No pages available'));
}

5. Memory Management

@override
void dispose() {
  _pageController.dispose();
  _autoScrollTimer?.cancel();
  super.dispose();
}

🎨 Customization Examples

Custom Navigation Buttons

isShowNextButtons: true,
previousButton: IconButton(
  icon: Icon(Icons.chevron_left),
  onPressed: _previousPage,
),
nextButton: IconButton(
  icon: Icon(Icons.chevron_right),
  onPressed: _nextPage,
),

Custom Dot Indicator

isShowDotIndicator: true,
dotColor: Colors.white.withOpacity(0.5),
activeDotColor: Colors.white,

Different Scroll Effects

scrollDuration: Duration(milliseconds: 600),
scrollCurve: Curves.easeOutBack,

🚨 Troubleshooting

Issue: Pages not scrolling smoothly
Solution: Check if you have heavy widgets in pages. Consider using const constructors.

Issue: Auto-scroll not working
Solution: Verify isAutoScroll is true and check timer isn't being canceled.

Issue: Dots not updating
Solution: Ensure onPageChanged callback is properly updating state.

Libraries

apptomate_custom_pageview