flutter_toggle_button 0.0.3 copy "flutter_toggle_button: ^0.0.3" to clipboard
flutter_toggle_button: ^0.0.3 copied to clipboard

A highly customizable toggle button widget for Flutter applications. This widget allows you to create stylish toggle buttons with flexible configurations.

Flutter Toggle Button Widget #

License: MIT

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

Example 01
Example 01
Example 02
Example 02
Example 03
Example 03
Example 04
Example 04
Example 05
Example 05
Example 06
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.

Getting Started #

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 #

  • Add animation as a parameter.
  • Add duration for animation as a parameter.

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.

3
likes
160
pub points
76%
popularity

Publisher

unverified uploader

A highly customizable toggle button widget for Flutter applications. This widget allows you to create stylish toggle buttons with flexible configurations.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_toggle_button