circular_loading_button 1.0.2

circular_loading_button is simple Flutter loading/progress animated button.

example/lib/main.dart

import 'package:example/provider_theme.dart';
import 'package:example/themes/custom_theme.dart';
import 'package:flutter/material.dart';
import 'package:circular_loading_button/loading_button.dart';
import 'package:circular_loading_button/loading_button_state.dart';
import 'package:provider/provider.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => ThemeProvider(),
      child: Consumer<ThemeProvider>(
          builder: (context, ThemeProvider provider, child) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: provider.currentTheme,
          home: const MyHomePage(title: 'LoadingButton Demo'),
        );
      }),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  List<LoadingButtonType> types = [
    LoadingButtonType.elevated,
    LoadingButtonType.filled,
    LoadingButtonType.filledTonal,
    LoadingButtonType.outlined
  ];
  List<LoadingButtonState> currentStates = [
    LoadingButtonState.idle,
    LoadingButtonState.idle,
    LoadingButtonState.idle,
    LoadingButtonState.idle
  ];

  int _currentIndex = 0;
  List<ThemeData> themes = [
    CustomTheme.purple,
    CustomTheme.purpleSquared,
    CustomTheme.orange,
    CustomTheme.orangeSquared
  ];

  void _changeState(int index) {
    setState(() {
      currentStates[index] = (currentStates[index] == LoadingButtonState.idle)
          ? LoadingButtonState.loading
          : LoadingButtonState.idle;
    });
  }

  @override
  Widget build(BuildContext context) {
    ThemeProvider provider = Provider.of<ThemeProvider>(context, listen: false);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 40.0),
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
            SegmentedButton<int>(
              showSelectedIcon: false,
              segments: const <ButtonSegment<int>>[
                ButtonSegment<int>(value: 0, label: Text('Purple')),
                ButtonSegment<int>(value: 1, label: Text('Purple SQ')),
                ButtonSegment<int>(value: 2, label: Text('Orange')),
                ButtonSegment<int>(value: 3, label: Text('Orange SQ')),
              ],
              selected: <int>{_currentIndex},
              onSelectionChanged: (Set<int> newSelection) {
                setState(() {
                  _currentIndex = newSelection.first;
                });
                provider.currentTheme = themes[_currentIndex];
              },
            ),
            const Spacer(),
            ...List.generate(
              types.length,
              (index) => Padding(
                padding: const EdgeInsets.symmetric(
                    horizontal: 20.0, vertical: 10.0),
                child: LoadingButton(
                    type: types[index],
                    state: currentStates[index],
                    expandedSize: const Size(250.0, 80.0),
                    loadingSize: const Size(30.0, 30.0),
                    onPressed: () {
                      _changeState(index);
                      Future.delayed(const Duration(seconds: 3),
                          () => _changeState(index));
                    },
                    child: const Text('Tap me!')),
              ),
            ),
            const Spacer(),
          ]),
        ),
      ),
    );
  }
}