Shutter from zero 004 button assembly

1、 Button

Material In component library , A variety of buttons are provided for us ,

Such as ElevatedButton 、TextButton 、 OutlinedButton etc.

in addition ,Material All button components in the library have the same feature , That's the water ripple animation effect , One more onPressed attribute , Click callback used to set the button .

ElevatedButton Float button , It has shadows and a gray background , Press after , The shadows get bigger , Here's the picture

ElevatedButton The use of buttons is very simple

            ElevatedButton(              onPressed: () {},              child: Text("ElevatedButton"),            ),

TextButton Text button , The default background is transparent , No shadow , When pressed , There will be a background color , Here's the picture

TextButton The use of is also very simple

            TextButton(              onPressed: (){},              child: Text("TextButton"),            )

OutlinedButton There will be a border by default , No shadow and transparent background . Press after , The color of the border will brighten 、 Background and shadow effects will appear at the same time , Here's the picture

OutlinedButton The use of is also very simple

            OutlinedButton(              onPressed: () {},              child: Text("OutlinedButton"),            )

IconButton It's an icon button , Can generate a movie icon , Not including words , No default background , After clicking, the background animation will appear , Here's the picture

IconButton The use of is also very simple

            IconButton(              onPressed: () {},              icon: Icon(Icons.theater_comedy),            )

Buttons with icons

In fact, these buttons we mentioned above , Most of them can be said to be a button with icon ,
because ElevatedButton 、 TextButton、OutlinedButton There is one. icon Construction correspondence , It makes it easy to create buttons with icons , Here's the picture

The code is as follows ：

            ElevatedButton.icon(              onPressed: () {},              icon: Icon(Icons.send),              label: Text("ElevatedButton"),            ),            TextButton.icon(              onPressed: (){},              icon: Icon(Icons.safety_divider),              label: Text("TextButton"),            ),            OutlinedButton.icon(              onPressed: () {},              icon: Icon(Icons.abc),              label: Text("OutlinedButton"),            )

In the next section, I will introduce Pictures and Icon Use