apptomate_custom_pageview 0.0.1

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

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.