Summary of common components in StatelessWidget

StatelessWidget is often used to summarize the basics of Flutter. I have just started learning about Flutter. This summary is mainly used for future study to avoid forgetting.

The teacher I studied the videos withBlog addressWhat the teacher said was very good and clear.

Day 1 of Flutter learning: A guy spent his lunch money to buy a Flutter teaching video just to find out if Flutter supports dual system development?

Dart data types and methods: Dart data types and methods: Dart data types and methods:

Learning the Dart language also reminded me of the Java foundation. “Be honest with me” was really quick to learn Flutter.

1.Text

Dart uses a declarative layout format.


TextStyle textStyle = TextStyle(fontSize: 30.// Font size
        color:Colors.deepOrange,                     // Font color
        decoration: TextDecoration.lineThrough,     // Set the stripper
        decorationColor: Colors.green,          // Delete the line color is green
        decorationStyle: TextDecorationStyle.wavy,      // Delete line is wavy line
        fontWeight: FontWeight.bold,                 / / bold
        fontStyle: FontStyle.italic,          / / italics
        / / letterSpacing: 2.0,
       // backgroundColor: color.blue, // backgroundColor
       );

 Text(
	   'Hello world'.// Output the content
	   style: textStyle,    // Font format
	   //textDirection: TextDirection.ltr,
	   softWrap: false.// wrap
	   overflow: TextOverflow.fade,  // How to handle text when it is out of the screen (clip, fade, ellipsis)
	   textScaleFactor: 1.0.)Copy the code

Layout format: Effect:

2.icon

Icon(
   Icons.access_alarm,  // The system has its own image
   size: 50.// Image size
   color: Colors.red,   // Image color
   ),
Copy the code

How do I import external images?

1. Create an images directory

2. Import the images you need to import

3. Add the image address in pubspec.yaml

4. Use the Image component to import external images

   Image(
      width: 100,
      height: 100,
      image:AssetImage('images/image.png'),Copy the code

The effect is as follows:

3.CloseButton,BackButton

CloseButton(),
BackButton(),
IconButton(icon:Icon(Icons.people), onPressed: null),
Copy the code

The effect is as follows:

4.chip

   Chip(
    avatar: Icon(Icons.people),  // The left image
    label: Text('Interesting widgets'),
    deleteIcon: Icon(Icons.remove_red_eye_outlined),  //
    onDeleted: ()=>print('delete'),  // Respond to events
    ),
Copy the code

Effect:

5.Divider

The separator

 Divider(
   height: 10,
   indent: 10,
   color: Colors.orange,
  ),
Copy the code

Effect:

6.Card

 Card(
	color: Colors.blue,   // Card background color
	  shadowColor: Colors.red, // Shadow color
	  elevation: 5.// Shadow height
	  margin:EdgeInsets.all(10),  / / from the outside
	  child: Container(   // Wrap it in a Container
	    width: 150,    
	    height: 80,
	    padding: EdgeInsets.all(10),   / / padding
	    child:Column(
	      children: [
	        Text(
	          'I am Card',        
	          style: textStyle,
	        ),
	        Icon(
	          Icons.add_a_photo,
	          size: 30,
	          color: Colors.orange,
	        )
	      ],
	    )
	  ),
	),
Copy the code

Effect:

7.AlertDialog

AlertDialog(
    title: Text('Rat feed juice'),
    content: Text('Careless, no flash.'),),Copy the code

Effect:

In continuous learning…