Opacity also known as Alpha makes the widget or View transparent according to given value between 0.1 to 1. In flutter we would use Opacity widget to make child widget transparent so when they will show on screen they will become lighter or you can say transparent and their below view will be visible as they became transparent. So in this tutorial we would Flutter Set Change Add Opacity Alpha on Raised Button Android iOS Example tutorial.
Contents in this project Flutter Set Change Add Opacity Alpha on Raised Button Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file. This is our main package to import and all of our mainly used widgets is written in this package.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp class extends with State less widget.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build area -> Material App -> Scaffold widget -> Center Widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Set Button Opacity in Flutter') ), body: Center( child: ) ) ); } |
5. Creating Opacity widget and put the Raised Button as Child widget inside Opacity widget.
- opacity : To make the child view transparent. Value should be given between 0.0 to 1. Here 0.0 will not make the child view transparent so pass the value between 0.1 to 1.
|
1 2 3 4 5 6 7 8 9 10 |
Opacity( opacity: 0.6, child: RaisedButton( onPressed: () {print('Button Clicked');}, child: Text(' Button With Opacity Applied '), color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ) |
6. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Set Button Opacity in Flutter') ), body: Center( child: Opacity( opacity: 0.6, child: RaisedButton( onPressed: () {print('Button Clicked');}, child: Text(' Button With Opacity Applied '), color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ) ) ) ); } } |
Screenshot:
