1. Basic components

1.1. The Container

A widget that can draw, position, and resize.

Container(width: 300, // width: 300, // Width: 300, // Height decoration: BoxDecoration(borderRadius: BorderRadius. Circular (5), // Rounded border: border. All (width: 2.0, color: color.blueaccent // border), color: Green, // color), alignment: alignment. Center, // alignment mode padding: edgeinset.all (10), // margin: EdgeInsets. All (10), / / from the child: outside the Text (' test '), / / child components);Copy the code

1.2. The Row

List the child widgets horizontally.

Row (mainAxisAlignment: mainAxisAlignment spaceBetween, / / the home neat way crossAxisAlignment: CrossAxisAlignment center, / / vertical alignment children: [Text / / component array (' 1 '), Expanded (child / / extension components: Text (' 2 'test, textAlign: TextAlign. Center), flex: 1, / / the rest is my), Text (' 3 '),),),Copy the code

1.3. The Column

List the child widgets vertically.

The Column (mainAxisAlignment: mainAxisAlignment spaceEvenly, / / the home neat way crossAxisAlignment: CrossAxisAlignment center, / / horizontal alignment children: [Text / / component array (' 1 '), Text (' 2 '), Text (' 3 '),],),Copy the code

1.4. The Image

A widget that displays images.

Column(children: [Image(Image: NetworkImage(" NetworkImage "), width: 100, fit: Boxfit.fitwidth, // zoom mode), ClipOval(// fillet child: image. asset(' local Image ', width: 100, height: 100, fit: BoxFit.contain, ), ) ], ),Copy the code

1.5. The Text

Single-format text.

Text(' test ', textAlign: textalign.center, // Content alignmentoverflow: textoverflow.ellipsis, // beyond... Style: TextStyle(// font type: fontSize: 16, fontWeight: fontweight. bold, fontFamily: 'bold ', color: Text.blueaccent,),), text.rich (TextSpan(// TextSpan Text: 'test ', style: TextStyle(fontWeight: fontweight.bold), children: <TextSpan>[TextSpan(text: 'rich text ', style: TextStyle(fontSize: 16))])),Copy the code

1.6. The Icon

System design icon.

Icon(Icons. Favorite, // Icon color: color. pink, // Icon color size: 24, // Icon size), IconButton(// Icon onPressed: () {print(' click icon '); }, icon: Icon(Icons.add), ),Copy the code

1.7. The Button

Buttons with different properties.

ElevatedButton( onPressed: () {}, child: Text("elevateButton"), style: ButtonStyle( textStyle: MaterialStateProperty. All (TextStyle (fontSize: 20)), / / font size foregroundColor: MaterialStateProperty. All (Colors. White), / / font color backgroundColor: MaterialStateProperty. All (Colors. Red), / / background color padding: MaterialStateProperty. All (EdgeInsets. All (20)), / / padding shape: MaterialStateProperty. All (RoundedRectangleBorder (/ / shape with rounded corners borderRadius: borderRadius. Circular (20))), side: MaterialStateProperty. All (BorderSide (color: Colors purple, width: 1)), / / frame size color minimumSize: MaterialStateProperty. All (Size (200, 200)), / / button Size),Copy the code

1.8. Scaffold

Basic implementation of Material Design layout structure. This class provides apis for displaying drawers, Snackbars, and bottom sheets.

Scaffold(appBar: appBar (// navigation bar title: Text("Flutter Demo"),), body: Test(), // content Grey [100], // bottomNavigationBar: bottomNavigationBar (// bottom bar onTap: (index) {print(' click on the $index '); }, currentIndex: 0, items: [ BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'), ], ), );Copy the code

1.9. AppBar

A Material Design application bar that consists of toolbars and other possible widgets such as TabBar and FlexibleSpaceBar.

AppBar(// Navigation bar title: Text("Flutter Demo"), Actions: [Icon(Icons. Add), PopupMenuButton(// Popup menu itemBuilder: (BuildContext context) {return [PopupMenuItem(child: Text(' test 1'), value: '1 '), PopupMenuItem(child: Text(' test 1')) PopupMenuItem(child: Text(' test2 '), value: 'test3 '),];}, onSelected: (object) { print(object); }, ), ], backgroundColor: Colors.red, foregroundColor: Colors.white, ),Copy the code

1.10. BottomNavigationBar

The bottom navigation bar makes it easy to switch between taps and navigate to the top view.

BottomNavigationBar(// BottomNavigationBar onTap: (index) {print(' click on the $index '); }, currentIndex: 0, backgroundColor: Colors.pink, selectedItemColor: Colors.yellow, unselectedItemColor: Colors.white, items: [ BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'), ], ),Copy the code

1.11. TabBar

A Material Design Widget that displays horizontal tabs.

_tabController = TabController(length: 3, vsync: this);

TabBar(  
    tabs: [    
        Tab(icon: Icon(Icons.home)),    
        Tab(icon: Icon(Icons.send)),    
        Tab(icon: Icon(Icons.title)),  
    ],  
    controller: _tabController,
),
Copy the code

1.12. TabBarView

Displays the page view corresponding to the currently selected TAB. Usually used with a TabBar.

_tabController = TabController(length: 3, vsync: this);

TabBarView(  
    children: [    
        Text('ceshi1'),    
        Text('ceshi2'),    
        Text('ceshi3'),  
    ],  
    controller: _tabController,
),
Copy the code

To be added later