Flutter Interactivity 01: Elevated, Outlined, Text Buttons, Icon Buttons and Gesture Detector
Code URL: https://programming-4-students.blogsp...
Flutter Interactivity
In the context of Flutter, interactivity refers to the capability of a Flutter application to respond and react to user input, creating a dynamic and engaging user experience. Interactivity involves capturing and handling user gestures, such as taps, swipes, pinches, and more, and responding to these actions with changes in the user interface or the application's behavior.
Flutter Buttons
ElevatedButton:
A material design raised button.
Sample code:
ElevatedButton(
onPressed: () {
// Handle button press
},
child: Text('Elevated Button'),
)
Styling the Elevated Button
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
),
or
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0), // Border radius
),
TextButton:
A simple text button with no background or elevation.
Sample code:
TextButton(
onPressed: () {
// Handle button press
},
child: Text('Text Button'),
)
Styling the Text Button
style: TextButton.styleFrom(
primary: Colors.green, // Text color
textStyle: TextStyle(fontWeight: FontWeight.bold), // Text style
),
OutlinedButton:
A button with an outlined border.
Sample code:
OutlinedButton(
onPressed: () {
// Handle button press
},
child: Text('Outlined Button'),
)
Styling the Outlined Button
style: OutlinedButton.styleFrom(
primary: Colors.red, // Text color
side: BorderSide(color: Colors.red), // Border color
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0), // Border radius
),
),
IconButton:
A button that contains only an icon.
Sample code:
IconButton(
onPressed: () {
// Handle button press
},
icon: Icon(Icons.star),
)
Styling the Icon Button
icon: Icon(
Icons.star,
color: Colors.yellow,
size: 30.0,
),
Gesture Detector
is a widget that recognizes various gestures, such as taps, drags, and scale gestures, allowing developers to handle these gestures and respond to user input. It's a versatile widget that can wrap around other widgets, allowing them to become interactive and respond to user touch events.
Sample Code:
GestureDetector(
onTap: () {
print("You clicked the image");
},
onDoubleTap: () {
print("You double clicked the image");
},
onLongPress: () {
print("You long pressed the image");
},
child: Image.asset(
"assets/images/bike.jpg",
width: 100,
height: 100,
),
),
keywords: elevated buttons,outlined buttons,text buttons,icon buttons,flutter elevatedbutton,flutter elevatedbutton style,flutter elevatedbutton shape,flutter elevated button size,flutter outlinedbutton,outlined button in flutter,flutter outlined button style,flutter iconbutton,flutter gesturedetector