flutter_toggle_button - Dart API docs

A customizable Flutter widget for creating toggle buttons with various configurations such as button size, colors, gradients, and text styles.

Example 01	Example 02	Example 03
Example 04	Example 05	Example 06

Example 07

Features

Customizable Design: Configure button width, height, border radius, colors, gradients, and more.
Flexible Content: Supports various types of items including text, numbers, and widgets.
Callback Support: Provides a callback function when a button is tapped, enabling integration with other functionalities.

Installation

Add the following line to your pubspec.yaml under dependencies:

dependencies:
  custom_toggle_button: ^1.0.0 // Replace with latest version

Usage

Import the package into your Dart code:

import 'package:custom_toggle_button/flutter_toggle_button.dart';

Use the CustomToggleButton widget in your Flutter app:

FlutterToggleButton(
  items: ['Option 1', 'Option 2', 'Option 3'],
  onTap: (index) {
  print('Selected index: $index');
  },
// Customize other properties as needed
)

FlutterToggleButton(
  outerContainerColor: Colors.grey,
  borderRadius: 60,
  items: const ['Option 1', 'Option 2', 'Option 3],
  buttonGradient: const LinearGradient(
  colors: [Color(0xffcc2b5e), Color(0xff753a88)],
  ),
  onTap: (index) {
  print('Selected index = $index');
  },
// Customize other properties as needed
)

Parameters

Parameter	Default	Value Description
items	Required	List of items to display as buttons.
outerContainerMargin	7.87	Margin around the outer container.
buttonWidth	139	Width of each button.
buttonHeight	68	Height of each button.
borderRadius	108	Border radius for buttons and outer container.
buttonTextFontSize	22	Font size of the button text.
enableTextFontWeight	FontWeight.w600	Font weight of the text when button is enabled.
disableTextFontWeight	FontWeight.w500	Font weight of the text when button is disabled.
enableTextColor	Colors.white	Text color when button is enabled.
disableTextColor	Color(0xff7A7A7A)	Text color when button is disabled.
outerContainerColor	None	Solid color for the outer container. Provide either this or outerContainerGradient, not both.
buttonColor	None	Solid color for the buttons. Provide either this or buttonGradient, not both.
outerContainerGradient	None	Gradient for the outer container. Provide either this or outerContainerColor, not both.
buttonGradient	None	Gradient for the buttons. Provide either this or buttonColor, not both.
outerContainerBorderColor	Colors.transparent	Border color of the outer container.
outerContainerBorderWidth	0	Border width of the outer container.
buttonBorderColor	Colors.transparent	Border color of the buttons.
buttonBorderWidth	0	Border width of the buttons.
onTap	None	Callback function when a button is tapped.

Example

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Toggle Button Example'),
        ),
        body: Center(
          child: FlutterToggleButton(
            items: ['Option 1', 'Option 2', 'Option 3'],
            onTap: (index) {
              print('Selected index: $index');
            },
            buttonWidth: 120,
            buttonHeight: 50,
            borderRadius: 25,
            buttonTextFontSize: 18,
            enableTextColor: Colors.white,
            disableTextColor: Colors.grey,
            buttonGradient: LinearGradient(
              colors: [Colors.blue, Colors.green],
            ),
          ),
        ),
      ),
    );
  }
}

ToDo

Button Animation: Implement animation effects such as fade-in, scale, or color transitions when buttons are tapped to provide visual feedback to users.

License

This package is licensed under the MIT License. See the LICENSE file for details.

This README.md file serves as a comprehensive guide for users to understand and effectively use your custom toggle button widget package in their Flutter projects.

Flutter Toggle Button Widget