Last updated:
0 purchases
flutter toggle button
Flutter Toggle Button Widget #
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
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
Usage
Parameters
Example
ToDo
License
Installation #
Add the following line to your pubspec.yaml under dependencies:
dependencies:
custom_toggle_button: ^1.0.0 // Replace with latest version
copied to clipboard
Usage #
Import the package into your Dart code:
import 'package:custom_toggle_button/flutter_toggle_button.dart';
copied to clipboard
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
)
copied to clipboard
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
)
copied to clipboard
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],
),
),
),
),
);
}
}
copied to clipboard
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.
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.