Skip to content

Common Button

Buttons allow users to take actions, and make choices, with a single tap.

Button di Menoreh Library menggunakan Tema Matrial design v2. Button terdiri dari Widget ElevatedButton, OutlinedButton dan TextButton.

Untuk mengubah semua Tema button silahkan pelajari berikut ini.

Elevated Button

Elevated Button

ElevatedButton(
    onPressed: (){}
    child: const Text('Text Button'),
),
Info

Untuk mengubah warna Button silahkan tambahkan parameter style didalam ElevatedButton

style: ElevatedButton.styleFrom(
    backgroundColor: AppColors.green,
    foregroundColor: AppColors.white,
),

Elevated Icon Button

Elevated Button

ElevatedButton.icon(
    onPressed: (){}
    icon: const Icon(Icons.add),
    label: const Text('Title Button'),
  ),
),
Info

Untuk mengubah warna Button silahkan tambahkan parameter style didalam ElevatedButton.icon

style: ElevatedButton.styleFrom(
    backgroundColor: AppColors.green,
    foregroundColor: AppColors.white,
),

Outlined Button

Outlined Button

OutlinedButton(
    onPressed: (){}
    child: const Text('Text Button'),
),
Info

Untuk mengubah warna Button silahkan tambahkan parameter style didalam OutlinedButton

style: OutlinedButton.styleFrom(
    backgroundColor: AppColors.green,
    foregroundColor: AppColors.white,
),

Outlined Icon Button

Outlined Button

OutlinedButton.icon(
    onPressed: (){}
    icon: const Icon(Icons.add),
    label: const Text('Title Button'),
  ),
),
Info

Untuk mengubah warna Button silahkan tambahkan parameter style didalam OutlinedButton.icon

style: OutlinedButton.styleFrom(
    backgroundColor: AppColors.green,
    foregroundColor: AppColors.white,
),

Text Button

Text Button

TextButton(
    onPressed: (){}
    child: const Text('Text Button'),
),
Info

Untuk mengubah warna Button silahkan tambahkan parameter style didalam TextButton

style: TextButton.styleFrom(
    backgroundColor: AppColors.green,
    foregroundColor: AppColors.white,
),

Text Icon Button

Text Button

TextButton.icon(
    onPressed: (){}
    icon: const Icon(Icons.add),
    label: const Text('Title Button'),
  ),
),
Info

Untuk mengubah warna Button silahkan tambahkan parameter style didalam TextButton.icon

style: TextButton.styleFrom(
    backgroundColor: AppColors.green,
    foregroundColor: AppColors.white,
),

Customization

To change the whole Button Theme, please open the core/themes/app_theme.dart. Here's how to change the Widget Buttons theme:

Elevated Button

 elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
    shape: const StadiumBorder(),
    padding: const EdgeInsets.symmetric(horizontal: AppDimens.paddingLarge),
    foregroundColor: AppColors.white,
    backgroundColor: AppColors.primary,
    minimumSize: Size(AppDimens.size8X, AppDimens.size3XL),
    shadowColor: AppColors.transparant,
    elevation: 0,
    ),
),

Outlined Button

outlinedButtonTheme: OutlinedButtonThemeData(
    style: OutlinedButton.styleFrom(
        foregroundColor: AppColors.primary,
        side: const BorderSide(width: 1.0, color: AppColors.primary),
        shape: const StadiumBorder(),
        padding: const EdgeInsets.symmetric(horizontal: AppDimens.paddingLarge),
        minimumSize: Size(AppDimens.size8X, AppDimens.size3XL),
        shadowColor: AppColors.transparant,
        elevation: 0,
    ),
),

Text Button

textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(
        shape: const StadiumBorder(),
        padding: const EdgeInsets.symmetric(horizontal: AppDimens.paddingLarge),
        foregroundColor: AppColors.primary,
        minimumSize: Size(AppDimens.size8X, AppDimens.size3XL),
        elevation: 0,
    ),
)
Authors: Nanang Prasetya