custom_month_picker 0.1.1

A lightweight, customizable month picker popup for Flutter. Pick a month from a responsive grid with full theming, optional disabled months, and a one-line dialog helper.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'custom_month_picker demo',
      theme: ThemeData(
        colorSchemeSeed: const Color(0xFFFF6F00),
        useMaterial3: true,
      ),
      home: const DemoPage(),
    );
  }
}

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

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  String? _selected;

  Future<void> _openDefault() async {
    final picked = await CustomMonthPicker.show(
      context,
      selectedMonth: _selected,
      enabledUpToIndex: DateTime.now().month,
    );
    if (picked != null) {
      setState(() => _selected = picked);
    }
  }

  Future<void> _openCustomized() async {
    final picked = await CustomMonthPicker.show(
      context,
      selectedMonth: _selected,
      title: 'Pick a month',
      crossAxisCount: 4,
      months: const [
        'January', 'February', 'March', 'April',
        'May',     'June',     'July',  'August',
        'September','October', 'November','December',
      ],
      theme: const CustomMonthPickerTheme(
        primaryColor: Color(0xFF2E7D32),
        borderRadius: 24,
        tileBorderRadius: 8,
        gridSpacing: 12,
      ),
    );
    if (picked != null) {
      setState(() => _selected = picked);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('custom_month_picker')),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Card(
              child: ListTile(
                leading: const Icon(Icons.event),
                title: const Text('Selected month'),
                subtitle: Text(_selected ?? '(none)'),
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: _openDefault,
              child: const Text('Open default picker'),
            ),
            const SizedBox(height: 12),
            OutlinedButton(
              onPressed: _openCustomized,
              child: const Text('Open customized picker (4 cols, full names)'),
            ),
            const SizedBox(height: 24),
            const Divider(),
            const SizedBox(height: 12),
            const Text(
              'Inline (embedded) usage:',
              style: TextStyle(fontWeight: FontWeight.w600),
            ),
            const SizedBox(height: 8),
            Expanded(
              child: CustomMonthPicker(
                selectedMonth: _selected,
                enabledUpToIndex: DateTime.now().month,
                onMonthSelected: (m) => setState(() => _selected = m),
              ),
            ),
          ],
        ),
      ),
    );
  }
}