TextWidget Text component explanation

Common properties for TextWidget

TextAlign: Text alignment attributes (textalign.center, textalign.left, textalign.right, textalign.start, textalign.end) 3. Overflow: Controls the overflow effect of text

Child: Text(" test Text, test Text content display ", textAlign: Textalign. left, maxLines: 1, Overflow: textoverflow. ellipsis, style: TextStyle(fontSize: 25.0, color: color.fromargb (255, 255, 150, 150), decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.solid ), ),Copy the code

Container Container components

Use of the Alignment attribute

alignment: Alignment.center
Copy the code

Set the width, height and color

Width: 500.0, height: 400.0, color: color.fromargb (255, 255, 150, 40)Copy the code

Padding Use of the inner margin property

EdgeInsets. All () const EdgeInsets. FromLTRB (this.left, this.top, this.right, this.bottom)Copy the code

Margin The use of the margin attribute

EdgeInsets. All () const EdgeInsets. FromLTRB (this.left, this.top, this.right, this.bottom)Copy the code

Color background color

1. Set the border of the container 2.BoxDecoration Widget 3

decoration: new BoxDecoration(
  gradient: const LinearGradient(
    colors: [
      Colors.lightBlueAccent,
      Colors.greenAccent,
      Colors.purpleAccent
    ]
  )
),
Copy the code

ImageWidget explains the image component

1. Several ways to add Image widgets

  • Imgae.asset: Loads the resource image, making it too large for packaging
  • Image.network: web resource images, frequently changed live pictures
  • Image.file: a local Image, such as a preview of the Image taken by the camera
  • Image. Memory: Image loaded into memory, Uint8List

2. The Fit attributes

fit: BoxFit.cover
Copy the code

3. Picture blending mode

color: Colors.pinkAccent,colorBlendMode: BlendMode.darken
Copy the code

4. The Repeat property makes the image Repeat

repeat: ImageRepeat.repeat
Copy the code

Use of the ListView Widget list component

Syntax of ListView component 2. Use of ListTile 3. Make a list of pictures

body: new ListView( children: [ new ListTile( leading: new Icon(Icons.ac_unit), title: New Text(" look at the effect "),), new ListTile(leading: new Icon(Icons. Access_alarms), title: New Text(" look at the effect "),), new ListTile(leading: new Icon(Icons. Add_a_photo), title: New Text(" look at the effect "),), New work Image.net (" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3007246663, & FM = 26 & gp = 0. 2059636712 JPG "). New work Image.net (" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3007246663, & FM = 26 & gp = 0. 2059636712 JPG "). New work Image.net (" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3007246663, & FM = 26 & gp = 0. 2059636712 JPG "). New work Image.net (" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3007246663, & FM = 26 & gp = 0. 2059636712 JPG "). ],)));Copy the code

Horizontal lists and custom components

Use of horizontal lists. 2. ScrollDirection property

Axis. Horizontal: Horizontal: horizontal: horizontal: horizontal

Body: Center(child: Container(height: 200.0, child: new ListView(scrollDirection: Axis. Horizontal, children: [New Container(width: 200.0, color: Colors. LightBlueAccent,), new Container(width: 200.0, color: Colors. YellowAccent,), new Container(width: 200.0, color: color.redaccent,), new Container(width: 200.0, color: color.redaccent,), new Container(width: 200.0, color: OrangeAccent,), new Container(width: 200.0, color: color.greenaccent,)],),));Copy the code

3. Code optimization, custom components

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp( title: "Flutter Demo", home: Scaffold( appBar: AppBar( title: Text("Flutter Text"), ), body: Center( child: Container(height: Child: 200.0, MyListTest ()),))); } } class MyListTest extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: Implement build return ListView(scrollDirection: Axis. Horizontal, children: [new Container(width: 200.0, color: Colors. LightBlueAccent,), new Container(width: 200.0, color: color.yellowaccent,), new Container(width: 200.0, color: Colors. Accent,)],); }}Copy the code

Use of dynamic lists

Use of the List type in Dart

  • The List type is introduced, which can be simply understood as an array in JS
  • There are four ways to declare a List

Passing and accepting parameters is the basis for implementing dynamic lists

  • How to pass parameters
  • If you accept parameters

The case for dynamic lists

import 'package:flutter/material.dart'; void main() => runApp(MyApp( items: new List<String>.generate(1000, (i) => "Item $i") )); class MyApp extends StatelessWidget { final List<String> items; MyApp({Key key, @required this.items}):super(key: key); Widget build(BuildContext context) { return MaterialApp( title: "Flutter Demo", home: Scaffold( appBar: AppBar( title: Text("Flutter Text"), ), body: new ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return new ListTile( title: new Text('${items[index]}'), ); }))); }}Copy the code