459 views.Raised Button is one of the material design concept.
A raised button is based on a Material widget whose Material.elevation increases when the button is pressed.
Use raised buttons to add dimension to otherwise mostly flat layouts, e.g. in long busy lists of content, or in wide spaces. Avoid using raised buttons on already-raised content such as dialogs or cards.
If onPressed and onLongPress callbacks are null, then the button will be disabled and by default will resemble a flat button in the disabledColor. If you are trying to change the button’s color and it is not having any effect, check that you are passing a non-null onPressed or onLongPress callbacks.
If you want an ink-splash effect for taps, but don’t want to use a button, consider using InkWell directly.
Raised buttons have a minimum size of 88.0 by 36.0 which can be overridden with ButtonTheme.
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); /// This Widget is the main application widget. class MyApp extends StatelessWidget { static const String _title = 'Flutter Code Sample'; @override Widget build(BuildContext context) { return MaterialApp( title: _title, home: Scaffold( appBar: AppBar(title: const Text(_title)), body: MyStatelessWidget(), ), ); } } /// This is the stateless widget that the main application instantiates. class MyStatelessWidget extends StatelessWidget { MyStatelessWidget({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ const RaisedButton( onPressed: null, child: Text('Disabled Button', style: TextStyle(fontSize: 20)), ), const SizedBox(height: 30), RaisedButton( onPressed: () {}, child: const Text('Enabled Button', style: TextStyle(fontSize: 20)), ), const SizedBox(height: 30), RaisedButton( onPressed: () {}, textColor: Colors.white, padding: const EdgeInsets.all(0.0), child: Container( decoration: const BoxDecoration( gradient: LinearGradient( colors: <Color>[ Color(0xFF0D47A1), Color(0xFF1976D2), Color(0xFF42A5F5), ], ), ), padding: const EdgeInsets.all(10.0), child: const Text('Gradient Button', style: TextStyle(fontSize: 20)), ), ), ], ), ); } } |
OutPut
