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.

Material Button Switch Demo

✨ 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,
});
Parameter Description
pages List of views to display; each page corresponds to an icon.
icons List of icons representing each page.
activeColor Color of the currently active icon.
inactiveColor Color of inactive icons.