stack_banners 0.0.1

stack_banners: ^0.0.1 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:stack_banners/stack_banners.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stack Banners Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Stack Banners'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final StackBannersController _controller = StackBannersController();
  StackBannersStyle _style = StackBannersStyle.style1;
  Axis _scrollDirection = Axis.horizontal;
  Alignment _alignment = Alignment.centerLeft;
  bool _loop = false;
  bool _autoPlay = false;
  int _currentIndex = 0;

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[500],
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Column(
          children: [
            // Banner
            Expanded(
              child: Center(
                child: StackBanners(
                  controller: _controller,
                  options: StackBannersOptions(
                    style: _style,
                    alignment: _alignment,
                    scrollDirection: _scrollDirection,
                    loop: _loop,
                    autoPlay: _autoPlay,
                  ),
                  onIndexChanged: (index) {
                    setState(() {
                      _currentIndex = index;
                    });
                  },
                  items: [
                    // StackBannersItem(image: const NetworkImage('https://picsum.photos/400/400')),
                    // StackBannersItem(image: const NetworkImage('https://picsum.photos/500/500')),
                    // StackBannersItem(image: const NetworkImage('https://picsum.photos/600/600')),
                    // StackBannersItem(image: const NetworkImage('https://picsum.photos/700/700')),
                    // StackBannersItem(image: const NetworkImage('https://picsum.photos/400/400')),
                    // StackBannersItem(image: const NetworkImage('https://picsum.photos/500/500')),
                    // StackBannersItem(image: const NetworkImage('https://picsum.photos/600/600')),
                    // StackBannersItem(image: const NetworkImage('https://picsum.photos/700/700')),
                    StackBannersItem(image: const AssetImage('assets/image_1.png')),
                    StackBannersItem(image: const AssetImage('assets/image_2.png')),
                    StackBannersItem(image: const AssetImage('assets/image_3.png')),
                    StackBannersItem(image: const AssetImage('assets/image_4.png')),
                    StackBannersItem(image: const AssetImage('assets/image_5.png')),
                    StackBannersItem(image: const AssetImage('assets/image_6.png')),
                    StackBannersItem(image: const AssetImage('assets/image_7.png')),
                    StackBannersItem(image: const AssetImage('assets/image_8.png')),
                    StackBannersItem(image: const AssetImage('assets/image_9.png')),
                  ],
                ),
              ),
            ),
            // Current index display
            Container(
              padding: const EdgeInsets.all(4),
              child: Text(
                'Current Index: $_currentIndex',
                style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
            ),

            // Alignment selector dropdown
            _buildAlignmentSelector(),
            // Scroll direction selector dropdown
            _buildScrollDirectionSelector(),
            // Loop selector dropdown
            _buildLoopSelector(),
            // Auto play selector dropdown
            _buildAutoPlaySelector(),
            // Style selector dropdown
            _buildStyleSelector(),
          ],
        ),
      ),
    );
  }

  Widget _buildAlignmentSelector() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Alignment: ', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
          const SizedBox(width: 8),

          DropdownButton<Alignment>(
            value: _alignment,
            items: const [
              DropdownMenuItem(value: Alignment.centerLeft, child: Text('Center Left')),
              DropdownMenuItem(value: Alignment.centerRight, child: Text('Center Right')),
              DropdownMenuItem(value: Alignment.topCenter, child: Text('Top Center')),
              DropdownMenuItem(value: Alignment.bottomCenter, child: Text('Bottom Center')),
            ],
            onChanged: (Alignment? newAlignment) {
              if (newAlignment != null) {
                setState(() {
                  _alignment = newAlignment;
                });
              }
            },
          ),
        ],
      ),
    );
  }

  Widget _buildScrollDirectionSelector() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text(
            'Scroll direction: ',
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
          ),
          const SizedBox(width: 8),

          DropdownButton<Axis>(
            value: _scrollDirection,
            items: const [
              DropdownMenuItem(value: Axis.horizontal, child: Text('Horizontal')),
              DropdownMenuItem(value: Axis.vertical, child: Text('Vertical')),
            ],
            onChanged: (Axis? newScrollDirection) {
              if (newScrollDirection != null) {
                setState(() {
                  _scrollDirection = newScrollDirection;
                });
              }
            },
          ),
        ],
      ),
    );
  }

  Widget _buildLoopSelector() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Loop: ', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
          const SizedBox(width: 8),

          DropdownButton<bool>(
            value: _loop,
            items: const [
              DropdownMenuItem(value: false, child: Text('False')),
              DropdownMenuItem(value: true, child: Text('True')),
            ],
            onChanged: (bool? newLoop) {
              if (newLoop != null) {
                setState(() {
                  _loop = newLoop;
                });
              }
            },
          ),
        ],
      ),
    );
  }

  Widget _buildAutoPlaySelector() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Auto Play: ', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
          const SizedBox(width: 8),

          DropdownButton<bool>(
            value: _autoPlay,
            items: const [
              DropdownMenuItem(value: false, child: Text('False')),
              DropdownMenuItem(value: true, child: Text('True')),
            ],
            onChanged: (bool? newAutoPlay) {
              if (newAutoPlay != null) {
                setState(() {
                  _autoPlay = newAutoPlay;
                });
              }
            },
          ),
        ],
      ),
    );
  }

  Widget _buildStyleSelector() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Style: ', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
          const SizedBox(width: 8),

          DropdownButton<StackBannersStyle>(
            value: _style,
            items: const [
              DropdownMenuItem(value: StackBannersStyle.style1, child: Text('Style 1')),
              DropdownMenuItem(value: StackBannersStyle.style2, child: Text('Style 2')),
            ],
            onChanged: (StackBannersStyle? newStyle) {
              if (newStyle != null) {
                setState(() {
                  _style = newStyle;
                });
              }
            },
          ),
        ],
      ),
    );
  }
}