1. DecoratedBox components
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DecoratedBox components',
home: Scaffold(
appBar: AppBar(
title: Text('DecoratedBox components')),// Decorate the container
body: Container(
width: 200.0,
height: 200.0.// Decorate the Container
child: DecoratedBox(
/ * ** Decoration positioning
* DecorationPosition background background mode (text) above the background
* DecorationPosition foreground outlook mode (text) under the background
* * /
position: DecorationPosition.foreground,
decoration: BoxDecoration(
// Add background color
color: Colors.blue,
// Set the background image
image: DecorationImage(
// Fill the image
fit: BoxFit.contain,
// Background image
image: ExactAssetImage('assets/1.png')),// Add rounded corners
/ / borderRadius: borderRadius circular (150.0),
/ / frame
border: Border.all(
// Border color
color: Colors.red,
// Frame size
width: 2.0
),
// Border shape (boxShape. circle is round and clashes with borderRadius rounded corners)
shape: BoxShape.circle
),
child: Text(
'Positioning Demonstration',
style: TextStyle(fontSize: 20.0, color: Colors.green) ), ), ), bottomNavigationBar: DemoPage(), ), ); }}Copy the code
2. FittedBox components
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FittedBox components',
home: Scaffold(
appBar: AppBar(
title: Text('FittedBox components')
),
body: Center(
child: Column(
children: <Widget>[
Container(
width: 100.0,
height: 100.0.// Fill the container
child:FittedBox(
/ * ** Boxfit.fill full display display may stretch full
* BoxFit. Contain All displays that the original proportion does not need to be filled
* BoxFit. Cover display may stretch may crop full
* BoxFit.fitWidth displays full width that may be stretched or clipped
* BoxFit. FitHeight shows possible stretching possible clipping height full
* BoxFit.none
* Boxfit. scaleDown has the same effect as any contain but does not allow it to contain more than the source image
* * /
fit: BoxFit.fill,
alignment: Alignment.center,
child: Container(
color: Colors.green,
child: Text(
'BoxFit.fill', style: TextStyle( color: Colors.white ), ) ) ) ) ], ), ), bottomNavigationBar: DemoPage(), ), ); }}Copy the code
3. OverflowBox components
Spillable component
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'OverflowBox components',
home: Scaffold(
appBar: AppBar(
title: Text('OverflowBox components')
),
body: Container(
color: Colors.green,
height: 200.0,
width: 200.0,
padding: const EdgeInsets.all(6.0),
// Overflow the container
child: OverflowBox(
// Alignment
alignment: Alignment.topLeft,
// Set a constraint
maxWidth: 300.0,
maxHeight: 500.0,
child: Container(
color: Colors.blueGrey,
width: 400.0,
height: 400.0) ), ), bottomNavigationBar: DemoPage(), ), ); }}Copy the code
4. RotatedBox components
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'RotatedBox components',
home: Scaffold(
appBar: AppBar(
title: Text('RotatedBox components')
),
body: Container(
child: Column(
children: <Widget>[
SizedBox(
height: 20.0
),
RotatedBox(
child: Text('rotation'),
quarterTurns: 1.// It takes 4 rotations
),
SizedBox(
height: 20.0
),
RotatedBox(
child: Text('rotation'),
quarterTurns: 2.// It takes 4 rotations
),
SizedBox(
height: 20.0
),
RotatedBox(
child: Text('rotation'),
quarterTurns: 3.// It takes 4 rotations
),
SizedBox(
height: 20.0
),
RotatedBox(
child: Text('rotation'),
quarterTurns: 4.// It takes 4 rotations), ] ), ), bottomNavigationBar: DemoPage(), ), ); }}Copy the code
5. SizedBox components
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SizedBox components',
home: Scaffold(
appBar: AppBar(
title: Text('SizedBox components')
),
body: Container(
// Specify the size
child: SizedBox(
width: 200,
height: 200,
child: Container(
// Width and height are invalid
width: 300.0,
height: 300.0,
color: Colors.green,
child: Text('Not beyond'), ) ), ), bottomNavigationBar: DemoPage(), ), ); }}Copy the code6.DropdownButton Dropdown component
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DropdownButton dropdown component ',
home: Scaffold(
appBar: AppBar(
title: Text('DropdownButton dropdown component ') ), body: Container( child: Domes() ), bottomNavigationBar: DemoPage(), ), ); }}var selectItemValue = 'Shanghai';
class Domes extends StatelessWidget {
List<DropdownMenuItem> grnerateItemList(){
final List<DropdownMenuItem> items = new List(a);final DropdownMenuItem item1 = DropdownMenuItem(child: Text('Beijing'), value: 'Beijing');
final DropdownMenuItem item2 = DropdownMenuItem(child: Text('Shanghai'), value: 'Shanghai');
final DropdownMenuItem item3 = DropdownMenuItem(child: Text('guangzhou'), value: 'guangzhou');
final DropdownMenuItem item4 = DropdownMenuItem(child: Text('shenzhen'), value: 'shenzhen');
items.add(item1);
items.add(item2);
items.add(item3);
items.add(item4);
return items;
}
@override
Widget build(BuildContext context) {
return DropdownButton(
// Drop down list data
items: grnerateItemList(),
// Change the event
onChanged: (T){
print('1');
// T is the selected value
},
// Prompt text
hint: Text('Please select a city'),
// It is selected by default
value: selectItemValue,
// Drop down icon size
iconSize: 40.0.// Drop down text styles
style: TextStyle(
color: Colors.green
),
// Shadow height
elevation: 20.// The same height as the parent container
isExpanded: true,); }}Copy the code
7. FlatButton components
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FlatButton components',
home: Scaffold(
appBar: AppBar(
title: Text('FlatButton components') ), body: Container( child: Domes() ), bottomNavigationBar: DemoPage(), ), ); }}class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
// Icon + text
FlatButton.icon(
onPressed: null,
icon: Icon(Icons.print),
label: Text('Default button')),/ / plain text
FlatButton(
onPressed: null,
child: Text(
"Click the login button"
),
// Button background color
color: Colors.green,
// Button highlight
colorBrightness: Brightness.dark,
// Background color when invalid
disabledColor: Colors.grey,
// When the text is invalid
disabledTextColor: Colors.red,
// Text color
textColor: Colors.white,
// Button theme
textTheme: ButtonTextTheme.accent,
// The color of the ink splatter
splashColor: Colors.blue,
// Anti-aliasing capability
clipBehavior: Clip.antiAlias,
padding: EdgeInsets.only(
bottom: 5.0,
top: 5.0,
left: 5.0,
right: 5.0
),
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.white,
width: 2.0,
style: BorderStyle.solid
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0) ) ), onLongPress: (){ }, ) ], ); }}Copy the code
8. FloatingActionButton components
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FloatingActionButton components',
home: Scaffold(
appBar: AppBar(
title: Text('FloatingActionButton components') ), body: Container( child: Domes() ), bottomNavigationBar: DemoPage(), ), ); }}class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
FloatingActionButton(
backgroundColor: Colors.red,
child: Text('button'),
onPressed: (){
},
),
FloatingActionButton(
backgroundColor: Colors.red,
child: Icon(Icons.add),
isExtended: true,
onPressed: (){
},
),
FloatingActionButton(
backgroundColor: Colors.red,
child: Text('button'),
// Prompt message
tooltip: 'Prompt message'./ / the foreground
foregroundColor: Colors.white,
// Toggle effect
heroTag: null.// Unclicked shadows
elevation: 8.0.// Click shadow
highlightElevation: 16.0.// The type can be regular mini add extended
mini: false.// Shape (square Angle)
shape: Border.all(
width: 2.0,
color: Colors.white,
style: BorderStyle.solid
),
onPressed: (){
},
),
FloatingActionButton(
backgroundColor: Colors.red,
child: Text('button'),
// Prompt message
tooltip: 'Prompt message'./ / the foreground
foregroundColor: Colors.white,
// Toggle effect
heroTag: null.// Unclicked shadows
elevation: 8.0.// Click shadow
highlightElevation: 16.0.// The type can be regular mini add extended
mini: false.// Shape (rounded corner)
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
color: Colors.white,
style: BorderStyle.solid
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(2.0),
topLeft: Radius.circular(2.0),
bottomRight: Radius.circular(2.0),
bottomLeft: Radius.circular(2.0)
)
),
onPressed: (){
},
),
// Extend button
FloatingActionButton.extended(
onPressed: (){},
icon: Icon(Icons.explicit),
label: Text('This is an extension button'))); }}Copy the code
9. IconButton components
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'IconButton components',
home: Scaffold(
appBar: AppBar(
title: Text('IconButton components')
),
body: Container(
child: Domes()
),
bottomNavigationBar: DemoPage(),
),
);
}
}
class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
returnColumn(children: <Widget>[// icon component IconButton(icon: icon (icon.add)), // AlignmentDirectional bottomCenter, / / color: color Colors. Blue, / / iconSize icon size: 50.0, / / ink splash splashColor: Color.red, // tooltip:'Prompt text', onPressed: (){} ) ], ); }}Copy the code
10. OutLineButton components
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'OutLineButton components',
home: Scaffold(
appBar: AppBar(
title: Text('OutLineButton components') ), body: Container( child: Domes() ), bottomNavigationBar: DemoPage(), ), ); }}class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
OutlineButton.icon(
onPressed: (){},
icon: Icon(Icons.ac_unit),
label: Text('Button text')),// Property reference the FloatingActionButton component
OutlineButton(
child: Text('button'), borderSide: BorderSide( color: Colors.green ), onPressed: (){ } ) ], ); }}Copy the code
11. OutLineButton components
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'OutLineButton components',
home: Scaffold(
appBar: AppBar(
title: Text('OutLineButton components') ), body: Container( child: Domes() ), bottomNavigationBar: DemoPage(), ), ); }}class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
RaisedButton(
onPressed: (){},
child: Text('Login button'),
/ / the background color
color: Colors.green,
/ / brightness
colorBrightness: Brightness.dark,
// Void background color
disabledColor: Colors.grey,
// Text color
textColor: Colors.white30,
/ / theme
textTheme: ButtonTextTheme.normal,
/ / splash
splashColor: Colors.blue,
// Anti-aliasing capability
clipBehavior: Clip.antiAlias,
padding: EdgeInsets.only(
bottom: 5.0,
top: 5.0
),
// Border style
// shape: Border.all(
/ / width: 2.0.
// color: Colors.red,
// style: BorderStyle.solid
// ),
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
color: Colors.white,
style: BorderStyle.solid
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
bottomLeft: Radius.circular(4.0),
bottomRight: Radius.circular(4.0)
)
),
),
RaisedButton(
onPressed: (){},
child: Text('Login button'),
/ / the background color
color: Colors.green,
/ / brightness
colorBrightness: Brightness.dark,
// Void background color
disabledColor: Colors.grey,
// Text color
textColor: Colors.white30,
/ / theme
textTheme: ButtonTextTheme.normal,
/ / splash
splashColor: Colors.blue,
// Anti-aliasing capability
clipBehavior: Clip.antiAlias,
padding: EdgeInsets.only(
bottom: 5.0,
top: 5.0
),
// Border style
shape: Border.all(
width: 2.0, color: Colors.red, style: BorderStyle.solid ), ) ], ); }}Copy the code
12. RawMaterialButton components
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'RawMaterialButton components',
home: Scaffold(
appBar: AppBar(
title: Text('RawMaterialButton components') ), body: Container( child: Domes() ), bottomNavigationBar: DemoPage(), ), ); }}class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
//
RawMaterialButton(
onPressed: (){},
textStyle: TextStyle(
fontSize: 28.0,
color: Colors.yellow
),
child: Text('RawMaterialButton'),
// Highlight the background color
highlightColor: Colors.red,
/ / splash
splashColor: Colors.blue,
/ / anti-aliasing
clipBehavior: Clip.antiAlias,
padding: EdgeInsets.only(
bottom: 5.0
),
// Highlight shadows
highlightElevation: 10.0,),); }}Copy the code13. Card components
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Card components',
home: Scaffold(
appBar: AppBar(
title: Text('Card components') ), body: Container( child: Domes() ), bottomNavigationBar: DemoPage(), ), ); }}class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Card(
color: Colors.green,
/ / the shadow
elevation: 10.0,
margin: EdgeInsets.all(20.0),
// Border style
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(Icons.ac_unit),
title: Text('Text content'),
subtitle: Text(
'Here are the subheadings.'
),
contentPadding: EdgeInsets.all(20.0() [() [() [() [() }}Copy the code