IconButtons

The ShapeIconButton is developed using IconButton and increased its button background; two shapes are provided either circle or rectangle.

IconButtons

• ShapeIconButton
• ShapeIconButtonWithLabel

ShapeIconButton(
  onPressed: () {},
  icon: Icons.add,
)

ShapeIconButton

ShapeIconButton(
  onPressed: () {},
  icon: Icons.add,
  shape: ButtonShape.rectangle,
)

ShapeIconButtonWithLabel

ShapeIconButtonWithLabel(
  onPressed: () {},
  label: 'Add',
  icon: Icons.add,
  shape: ButtonShape.rectangle,
)

Button Shapes

You can change a button size by passing the shape parameter to the widget

• circle (default)
• rectangle

Examples

• ShapeIconButton Example
• ShapeIconButtonWithLabel Example

ShapeIconButton

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'IconButtons Code Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: const Text(_title)),
          body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const ShapeIconButton(
                  onPressed: null,
                  icon: Icons.add,
                ),
                const SizedBox(height: 30),
                ShapeIconButton(
                  onPressed: () {},
                  icon: Icons.add,
                  shape: ButtonShape.rectangle,
                ),
              ],
            ),
          )),
    );
  }
}

ShapeIconButtonWithLabel

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'IconButtons Code Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: const Text(_title)),
          body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const ShapeIconButtonWithLabel(
                  onPressed: null,
                  icon: Icons.add,
                  label: "Add",
                ),
                const SizedBox(height: 30),
                ShapeIconButtonWithLabel(
                  onPressed: () {},
                  icon: Icons.add,
                  label: "Add",
                  shape: ButtonShape.rectangle,
                ),
              ],
            ),
          )),
    );
  }
}