miv_buttons 1.0.1 copy "miv_buttons: ^1.0.1" to clipboard
miv_buttons: ^1.0.1 copied to clipboard

Elegant pseudo 3D buttons. You can use them instead of or in addition to the standard buttons.

miv_buttons #

miv_buttons is a customizable button widget for Flutter with flexible options for layout, styling, and elevation. This widget allows you to create highly customizable buttons with various design options such as padding, elevation, background colors, border radius, and more.

Check the example online

Buttons in action

Features #

  • Customizable Design: Easily configure the button's color, padding, and border radius.
  • Dynamic Elevation: Supports different elevations for default and pressed states.
  • Flexible Content: Add any widget as a child, including text, icons, or images.
  • Preconfigured button types: For the most common buttons, use Button.icon(), Button.label(), Button.iconLabel(), Button.labelIcon().

Getting Started #

Usage #

To use the Button widget, import the package and place it within your widget tree:

import 'package:miv_buttons/button.dart';
import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Button Example'),
      ),
      body: Center(
        child: Button(
          onClick: () {
            print('Button pressed');
          },
          child: Text('Click Me'),
          color: Colors.blue,
          borderRadius: 8.0,
          horizontalPadding: 16.0,
          verticalPadding: 12.0,
          elevation: 6.0,
          pressedElevation: 2.0,
        ),
      ),
    );
  }
}

Named Constructors #

The miv_buttons package provides additional named constructors to create buttons with specific layouts more easily. These constructors help in quickly setting up common button types like icon buttons or buttons with labels. At the moment there are 4 options: Button.label(), Button.icon(),Button.iconLabel() and Button.labelIcon()

Button.label() #

This constructor creates a button with a text label. It is useful when you need a simple text-based button.

Button.label example

Button.label(
  onClick: () {
    print('Label button pressed');
  },
  label: 'Submit',
  color: Colors.green,
  labelColor: Colors.black,
)

Button.icon() #

This constructor is designed to create a button that features an icon. It is perfect for use cases where a simple visual button is required without text labels.

Button.icon example

Button.icon(
  onClick: () {
    print('Icon button pressed');
  },
  icon: Icons.thumb_up,
  color: Colors.orange,
  iconColor: Colors.black,
)

Button.iconLabel() #

This constructor is designed to create a button that includes both an icon and a text label. The icon is on the left of the label if isHorizontal is true (default). When you set isHorizontal to false, the icon will appear over the label.

Button.iconLabel example

Button.iconLabel(
  onClick: () {
    print('Button pressed');
  },
  icon: Icons.face,
  label: 'Log out',
  color: Colors.redAccent,
  foregroundColor: Colors.white,
  gap: 12.0,
)

Button.labelIcon() #

Similarly to the previous one, this constructor is designed to create a button that includes both an icon and a text label. This time the label is on the left of the icon if isHorizontal is true (default). When you set isHorizontal to false, the label will appear over the icon.

Button.labelIcon example

Button.labelIcon(
  onClick: () {
    print('Button pressed');
  },
  icon: Icons.arrow_forward,
  label: 'Continue',
  color: Colors.indigo,
  foregroundColor: Colors.white,
)

Customization Options #

The Button widget in miv_buttons comes with several properties that you can tweak to fit your UI needs. Here are the properties you can set for the Button and all the named constructors:

Property Type Default Description
onClick VoidCallback? - The callback triggered when the button is pressed. If null, the button is disabled. Required
onLongPress VoidCallback? - The callback function triggered when a pointer has remained in contact with the screen at the same location for a long period of time.
onLongPressUp VoidCallback? - The callback function triggered when a pointer that has triggered a long-press has stopped contacting the screen.
color Color 0xFF2196F3(blue) The background color of the button.
borderRadius double? 8.0 The border radius for rounding the corners of the button. Ignored for buttons which use Shape.circle.
horizontalPadding double? 12.0 Defines the horizontal padding between the button's content and its edges. Ignored for buttons which use Shape.circle.
verticalPadding double? 8.0 Defines the vertical padding between the button's content and its edges. Ignored for buttons which use Shape.circle.
elevation double 6.0 The elevation of the button when in its default state.
pressedElevation double 2.0 The elevation of the button when pressed.
shape Shape Shape.rectangle Shape of the button.
diameter double? 40.0 The diameter of the button when Shape.circle is used. Ignored for other shapes.
semanticLabel String? - The semantic label for the button that will be announced by screen readers.
excludeSemantics bool? false Whether to replace all child semantics with this node.

Additional properties specific to Button() constructor:

Property Type Default Description
child Widget - The content of the button, typically text, icons, or any widget. Required.

Additional properties specific to Button.label() constructor:

Property Type Default Description
label String - The text label displayed on the button. Required.
labelColor Color 0xFFFFFFFF(white) The color applied to the label. You can override it in labelStyle.
labelStyle TextStyle? - The text style applied to the label.

Additional properties specific to Button.icon() constructor:

Property Type Default Description
icon IconData - The icon displayed on the button. Required.
iconColor Color 0xFFFFFFFF(white) The color applied to the icon.
iconSize double 20.0 The size of the icon.

Additional properties specific to Button.iconLabel() and Button.labelIcon() constructors:

Property Type Default Description
icon IconData - The icon displayed on the button. Required.
iconSize double 20.0 The size of the icon.
label String - The text label displayed on the button. Required.
foregroundColor Color 0xFFFFFFFF(white) The color applied to the icon and the label. You can override label color in lableStyle
labelStyle TextStyle? - The text style applied to the label.
isHorizontal bool true Determines the layout direction of the icon and the label. If true (default), the icon and the label are arranged horizontally; if false, they are arranged vertically.
gap double 8.0 The space between the icon and the label.

Example #

Here's a more detailed example of how to use miv_buttons to create a custom button:

import 'package:flutter/material.dart';
import 'package:miv_buttons/button.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('miv_buttons Example'),
        ),
        body: Center(
          child: Button(
            onClick: () {
              print('Custom button pressed');
            },
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.thumb_up, color: Colors.white),
                SizedBox(width: 8),
                Text('Like', style: TextStyle(color: Colors.white)),
              ],
            ),
            color: Colors.blue,
            borderRadius: 12.0,
            horizontalPadding: 20.0,
            verticalPadding: 14.0,
            elevation: 12.0,
            pressedElevation: 4.0,
          ),
        ),
      ),
    );
  }
}

Contributing #

Contributions are welcome! If you have ideas or improvements, feel free to open an issue.

5
likes
160
points
162
downloads

Publisher

verified publishermivoligo.com

Weekly Downloads

Elegant pseudo 3D buttons. You can use them instead of or in addition to the standard buttons.

Repository (GitHub)
View/report issues

Topics

#button #ui #widget #design #flutter

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on miv_buttons