The information display component of the flutter material widget component is for your reference. The specific content is as follows
Widgets are divided into two categories:widgets libraryStandard widgets andMaterial Components librarydedicated widgets in any application can use widgets in the widgets library, but only Material applications can use the Material Components library. Among them, Card and ListTitle are components in the Material Components library.
Image Icon Chip Tooltip
Image: A widget that displays the image,
Usually used to obtain network images (String src, {}),
Load local image (String name, {})
Get an image from a file file (File file, {})
Get the image from unit8list (Uint8List bytes, {})
Icon:a Material Design icon.
Chip: Tag, a Material widget. It can present a complex content entity in a small piece, such as a contact
Tooltip: A text prompt tool that helps explain a button or other user interface, displays a prompt label when widget is pressed for a long time (when the user takes other appropriate actions)
Constructor
Image({
Key key,
@required ,//Image Image object ,// Semantic standard room = false,//Control the display of semantic labels. If true, semantiicLabel will be ignored , // The picture is wide ,// High picture ,// Picture color ,//Color Blending Mode ,
= ,// Centering = ,// Whether the picture is repeated flat ,//
= false,// Whether to draw pictures according to the text direction = false,// If true, the original image will still be displayed when updated, otherwise no content will be displayed. = ,//Filter quality })
(
String name, // Local image name {
Key key,
AssetBundle bundle,
,
= false,
double scale,
,
,
,
,
,
= ,
= ,
,
= false,
= false,
String package,
= ,
}
),
(
String src, // The URL path of the network image {
Key key,
double scale = 1.0,//Scaling ,
= false,//Control the display of semantic labels. If true, semantiicLabel will be ignored ,
,
,
,
,// The way the image is adapted to the container is equivalent to the backgrou-iamge-size in css, with values such as containing, cover, etc. = ,
= ,
,// Center slice? ? = false,
= false,
= ,
Map<String, String> headers,
}
)
Icon(
, // The icon to be displayed {
Key key,
,//Icon size ,//Icon color ,//Semantic tags ,// Text direction }
)
Chip({
Key key,
,//Usually, information such as avatar and pictures are placed in this widget @required ,//Label ,//Tag Style ,// Tag inner margin ,//Add this icon when the onDeleted callback function is set ,// Callback function, callback when clicking deleteIcon ,//DeleteIcon color ,// Long press and delete button prompt message ,//shape = ,//Cutting method ,//Background color ,//Inner margin ,//The material matches the target size })
Tooltip({
Key key,
@required , //Long press the contents in the prompt box = 32.0,// The height of this prompt box = const (horizontal: 16.0),//Inner margin of prompt box = 24.0,//The vertical offset of the prompt box from the widget = true,//The prompt is to display it under the widget by default = false,//Whether to send prompt information from the semantic tree ,// Widget for long press }) Application example
import 'package:flutter/';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home:Scaffold(
appBar: AppBar(
title: Text("data"),
),
body: Center(
child: Column(
children: <Widget>[
new (
'/p/20130828/',
// Scaling scale: 6.0,
),
new ("assets/images/"),
Icon(
Icons.ac_unit,
color: ,//Icon color size: 30,//Icon size semanticLabel: "icon demo",//Semantic labels seem useless? ? textDirection: ,// Text direction
),
Chip(
// Usually put information such as avatar and pictures in this widget avatar: CircleAvatar(
backgroundColor: .shade800,
child: Text('AB'),
),
label: Text('chip label'),//Label labelStyle: TextStyle(color: ),//Tag Style deleteIcon: Icon(),//Add this icon when the onDeleted callback function is set onDeleted: (){
print("ondeleted..............");
},// Callback function, callback when clicking deleteIcon deleteIconColor: ,//DeleteIcon color deleteButtonTooltipMessage: "aaaa",// Long press and delete button prompt message backgroundColor: ,//Background color ),
Tooltip(
message: "Prompt message",//Long press the contents in the prompt box height: 50,// The height of this prompt box padding: (12),//Inner margin of prompt box verticalOffset:60,//The vertical offset of the prompt box from the widget is offset downwards 60 here preferBelow: true,//The prompt is to display it under the widget by default excludeFromSemantics: true,//Whether to send prompt information from the semantic tree child: Text("data"),// Widget for long press ),
],
),
),
),
);
}
}DataTable
The data table displays the original dataset. They usually appear in desktop enterprise products. DataTable Widget implements this component
Constructor
DataTable({
Key key,
@required ,//Configuration of each column ,//The keys of the sorting column = true,//If there is a sorted sequence, the default ascending order sorting is ,// Select the row yes callback @required ,//Configuration of each line })
DataColumn({
@required ,//Column title ,//Long press the column title prompt = false,//Does this column represent data ,//Callback function when sorting by this column })
DataRow({
,
= false,//Is the row selected? ,//Checkback when changing is selected @required ,// Data for each unit in the row })
DataCell(
,
{
= false,//Is the child a placeholder = false,//Whether to display the edit icon ,//Click to edit the callback }
) Application example
import 'package:flutter/';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home:Scaffold(
appBar: AppBar(
title: Text("data"),
),
body: Center(
child: Column(
children: <Widget>[
DataTable(
columns: [
DataColumn(
label: Text("Name"),//Column title tooltip: "name",//Long press the column title prompt numeric: false,// Is it numbered onSort: (inx,bool){
print("Click on the column...."+()+"...."+());
} //Callback function when sorting by this column ),
DataColumn(
label: Text("age"),
numeric: true,
onSort: (inx,bool){
print("Click on the column...."+()+"...."+());
}
),
DataColumn(
label: Text("Profession")
),
],
rows: [
DataRow(
cells: [
DataCell(
Text("Zhang San")
),
DataCell(
Text("15")
),
DataCell(
Text("Country Chief")
),
]
),
DataRow(
cells: [
DataCell(
Text("Li Si")
),
DataCell(
Text("95")
),
DataCell(
Text("drummer")
),
]
),
DataRow(
selected: true,// Whether the row is selected //Checkback when changing is selected onSelectChanged: (val){
print("Row selected..."+());
},
cells: [
DataCell(
Text("Fei Fei")
),
DataCell(
Text("55"),
placeholder: false,//Is the child a placeholder showEditIcon: true,//Whether to display the edit icon onTap: (){
print("This column has been edited......");
}//Click to edit the callback ),
DataCell(
Text("Rider")
),
]
),
],
)
],
),
),
),
);
}
}Card
A Material Design card. Have a rounded corner and shadow
Constructor
Card({
Key key,
, // color ,// z-axis coordinates ,//shape = const (4.0),//Outer margin = ,//Cutting method ,//Subcomponent = true,//Is this component a single semantic container })Application example
import 'package:flutter/';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home:Scaffold(
appBar: AppBar(
title: Text("data"),
),
body: Center(
child: Column(
children: <Widget>[
Card(
// Children child: Container(child: Text("data"),),
// color color: ,
// Outer margin margin: (55),
// Z-axis coordinates are useless elevation: 55,
// Shape shape: (color: ),
// Boolean type seems useless semanticContainer: false,
clipBehavior: ,
)
],
),
),
),
);
}
}LinearProgressIndicator
A linear progress bar, and a circular progress bar CircularProgressIndicator
Constructor
LinearProgressIndicator({
Key key,
double value, // The value of the indicator Color backgroundColor,//Background color Animation<Color> valueColor,///Animation type parameter is used to set the color of the progress value. The default is the theme color, and the specified constant color is used String semanticsLabel,//Semantic tags String semanticsValue,// Semantic value })
CircularProgressIndicator({
Key key,
double value,// The value of the indicator Color backgroundColor,//Background color Animation<Color> valueColor,//Animation type parameter is used to set the color of the progress value. The default is the theme color, and the specified constant color is used = 4.0,// Indicator line width String semanticsLabel,
String semanticsValue,
})Application example
import 'package:flutter/';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home:Scaffold(
appBar: AppBar(
title: Text("data"),
),
body: Column(
children: <Widget>[
LinearProgressIndicator(
value: 0.6,// The progress value of the indicator backgroundColor: ,//Track background color semanticsLabel: "60%",
semanticsValue: "6",
valueColor: new AlwaysStoppedAnimation<Color>(),// Enter the picture bar animation color // valueColor: CurvedAnimation(),
),
Text("Circular Indicator"),
CircularProgressIndicator(
value: 0.5,
backgroundColor: ,// The background color does not work? ? valueColor: new AlwaysStoppedAnimation<Color>()
),
],
),
),
);
}
}The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.