Material Button Switch #

A simple and elegant Flutter widget that lets users switch between multiple customizable screens using Material-style toggle buttons. Ideal for apps requiring quick, intuitive toggling between views, such as calendars, checklists, or dashboards with two or more pages.

✨ Features #

• Multi-icon Material button switcher.
• Smooth transition between custom widgets.
• Customizable icons and widgets.
• Dynamic active and inactive colors.
• Highlighted icon for the active view.
• Minimal, intuitive design.

🚀 Getting Started #

To use this package, add it to your pubspec.yaml:

dependencies:
  material_button_switch: ^0.1.0

Then run:

flutter pub get

🧑‍💻 Usage #

Here's a simple example of how to use the MaterialButtonSwitch widget:

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MaterialButtonSwitch(
        pages: const [PageOne(), PageTwo(), PageThree()],
        icons: const [Icons.calendar_today, Icons.check_box_outlined, Icons.dashboard],
        activeColor: Colors.blue,
        inactiveColor: Colors.grey,
      ),
    );
  }
}

class PageOne extends StatelessWidget {
  const PageOne({super.key});
  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Center(child: Text("Page One")));
  }
}

class PageTwo extends StatelessWidget {
  const PageTwo({super.key});
  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Center(child: Text("Page Two")));
  }
}

class PageThree extends StatelessWidget {
  const PageThree({super.key});
  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Center(child: Text("Page Three")));
  }
}

📦 Constructor #

MaterialButtonSwitch({
  required List<Widget> pages,
  required List<IconData> icons,
  required Color activeColor,
  required Color inactiveColor,
});