Flutter - OutlinedButton Splash Color
The OutlinedButton class represents a material design outlined button that is
essentially a TextButton with an outlined border. The outlined buttons are
medium-emphasis buttons. In a flutter application, the OutlinedButtons contain
actions that are important, but they are not the primary action in an app. An
OutlinedButton widget’s default style is defined by defaultStyleOf. The
flutter application developers can override the OutlinedButton’s style with
its style parameter. An OutlinedButton has a default ButtonStyle.side which
defines the appearance of the outline. The flutter app developers can specify
an OutlinedButton's shape and the appearance of its outline by specifying both
the ButtonStyle.shape and ButtonStyle.side properties.
The following flutter application development tutorial will demonstrate how to set or change an OutlinedButton widget’s splash color. Here we will use the OutlinedButton class’s style property to set the OutlinedButton splash color (overlay color). We also set the size of OutlinedButton to make its size bigger.
The OutlinedButton class’s style property value is a ButtonStyle object which customizes this button's appearance.
The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.
ButtonStyle class’s many properties are MaterialStateProperty objects which resolve to different values depending on the button's state. The material state properties represent values that depend on a widget's material state.
The MaterialStateProperty resolveWith() is a convenient method for creating a MaterialStateProperty from a MaterialPropertyResolver function alone.
The flutter developers can set or change the splash color (overlay color) of an OutlinedButton by sending a value to the ButtonStyle class’s overlayColor property.
The ButtonStyle class’s overlayColor property defines the highlight color that's typically used to indicate that the button is focused, hovered, or pressed. The developers also called it to splash color.
The following flutter application development tutorial will demonstrate how to set or change an OutlinedButton widget’s splash color. Here we will use the OutlinedButton class’s style property to set the OutlinedButton splash color (overlay color). We also set the size of OutlinedButton to make its size bigger.
The OutlinedButton class’s style property value is a ButtonStyle object which customizes this button's appearance.
The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.
ButtonStyle class’s many properties are MaterialStateProperty objects which resolve to different values depending on the button's state. The material state properties represent values that depend on a widget's material state.
The MaterialStateProperty resolveWith() is a convenient method for creating a MaterialStateProperty from a MaterialPropertyResolver function alone.
The flutter developers can set or change the splash color (overlay color) of an OutlinedButton by sending a value to the ButtonStyle class’s overlayColor property.
The ButtonStyle class’s overlayColor property defines the highlight color that's typically used to indicate that the button is focused, hovered, or pressed. The developers also called it to splash color.
main.dart
import 'package:flutter/material.dart';
void main(){
runApp(
MaterialApp(
theme: ThemeData(primarySwatch: Colors.indigo),
home: Scaffold(
appBar: AppBar(
title: const Text("OutlinedButton Splash Color")
),
body: Center(
child: OutlinedButton(
onPressed: (){},
child: const Text("Click Me"),
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith(
(states) => Colors.green
.shade200.withOpacity(0.3)
),
fixedSize: MaterialStateProperty.resolveWith(
(states) => const Size(200, 75)
)
)
),
)
),
),
);
}
