Flutter 总结与实例

 Flutter 安装与总结
 https://files.cnblogs.com/files/fmj521/Flutter%E6%80%BB%E7%BB%93.docx.zip?t=1691812511&download=true

Flutter 登录与list列表demo

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SingleChildScrollView Demo',
      home: new Scaffold(
        appBar: AppBar(
          // 去掉导航栏下面的阴影
          elevation: 0.0,
          title: Text('SingleChildScrollView Demo'),
        ),
        body: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Center(
            child: Column(
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: BigImgs(),
                ),
                Container(
                  height: 200.0,
                  child: HomePage(),
                ),
                SizedBox(height: 10), //保留高度间距10,在垂直下Column
                Container(
                  // width: 320.0,
                  height: 140.0,
                  // color: Colors.pink,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      BigImgsRadius(),
                      TextIntroduce(),
                      SizedBox(width: 10), //保留宽度间距20,在水平下Row
                      TextIntroduceSpan(),
                    ],
                  ),
                ),
                SizedBox(width: 10),
                Container(
                  width: 320.0,
                  // height: 200.0,
                  color: Colors.blue,
                  child: _buildCard(),
                ),
                SizedBox(height: 10),
                Container(
                  width: 320.0,
                  height: 110.0,
                  // color: Colors.yellow,
                  child: Column(
                    children: [
                      _buildStack(),
                      SizedBox(height: 10),
                      TextIntroduce(),
                    ],
                  ),
                ),
                Container(
                  width: 320.0,
                  height: 200.0,
                  color: Colors.pink,
                  child: Horizontal(),
                ),
                Container(
                  width: 320.0,
                  height: 200.0,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// StatelessWidget 无状态控件，没有自己的私有数据，纯展示控件
class BigImgs extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // child: _buildStack(),
      // width: 100,
      height: 160,
      decoration: BoxDecoration(
          color: Colors.amberAccent,
          // borderRadius: BorderRadius.circular(300),
          image: DecorationImage(
              image: NetworkImage(
                  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F06%2F20180806140035_nnbed.thumb.700_0.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616430520&t=b40681968ba087b3533e17b9aa036450"),
              fit: BoxFit.cover)),
    );
  }
}

// StatefulWidget 有状态控件，有自己私有数据
class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.map),
            title: Text('Map'),
            // 跳转的路径
            onTap: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (BuildContext context) {
                return BigImgs();
              }));
            },
          ),
          Divider(), //设置分割线
          ListTile(
            leading: Icon(Icons.photo_album),
            title: Text('Album'),
          ),
          Divider(), //设置分割线
          ListTile(
            leading: Icon(Icons.phone),
            title: Text('Phone'),
          ),
        ],
      ),
    );
  }
}

// 文字超出显示...
class TextIntroduce extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // child: _buildCard(),
      child: Text(
        "Lorem ipsum",
        maxLines: 1, //
        overflow: TextOverflow.ellipsis,
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.w900,
          fontFamily: "Georgia",
        ),
      ),
      // child: Text(
      //   'Lorem ipsum，hello world！Lorem ipsum，hello world！Lorem ipsum，hello world',
      //   style: TextStyle(
      //       color: Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5),
      //       backgroundColor: Colors.red,
      //       fontSize: 30.0,
      //       letterSpacing: 6.0,
      //       fontStyle: FontStyle.italic,
      //       wordSpacing: 15.0,
      //       height: 2.0, //'height: 用在Text控件上的时候，会乘以fontSize做为行高,所以这个值不能设置过大',
      //       background: Paint()..color = Colors.blue,
      //       textBaseline: TextBaseline.alphabetic,
      //       fontFamily: "Georgia",
      //       shadows: [
      //         Shadow(color: Colors.black, offset: Offset(5, 6), blurRadius: 3)
      //       ],
      //       decoration: TextDecoration
      //           .underline, //underline：下划线,none：无划线,overline：上划线,lineThrough：中划线,combine：这个就厉害了，可以传入一个List，三线齐划
      //       // decoration: TextDecoration.combine(
      //       //     [TextDecoration.underline, TextDecoration.overline]),
      //       decorationColor: Colors.black,
      //       decorationStyle: TextDecorationStyle.wavy, //默认实线,dashed是虚线
      //       decorationThickness: 3.0,
      //       debugLabel: 'text'),
      //   textAlign: TextAlign.justify,
      //   textDirection: TextDirection.rtl,
      //   locale: Locale('fr', 'CH'),
      //   softWrap: true, //文本超出容器时是否自动换行，默认为true，为false时文本超出容器部分默认被剪切
      //   maxLines: 2, //文本的最大行数,
      //   overflow: TextOverflow.visible,
      //   textScaleFactor: 1.5,
      //   semanticsLabel:
      //       'test', //图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
      // ),
      width: 100,
      // color: Colors.grey[300], //backgroundColor
    );
  }
}

// 文字改变颜色
class TextIntroduceSpan extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text.rich(TextSpan(children: [
        TextSpan(text: 'hello: '),
        TextSpan(text: 'world', style: TextStyle(color: Colors.red))
      ])),
    );
  }
}

class BigImgsRadius extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // child: _buildStack(),
      width: 100,
      height: 100,
      decoration: BoxDecoration(
          color: Colors.amberAccent,
          borderRadius: BorderRadius.circular(300),
          image: DecorationImage(
              image: NetworkImage(
                  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F06%2F20180806140035_nnbed.thumb.700_0.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616430520&t=b40681968ba087b3533e17b9aa036450"),
              fit: BoxFit.cover)),
    );
  }
}

class Horizontal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        // This next line does the trick.
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            color: Colors.red,
            child: BigImgs(),
          ),
          Container(
            color: Colors.green,
            child: _buildStack(),
          ),
          Container(
            color: Colors.yellow,
            child: BigImgs(),
          ),
          Container(
            color: Colors.orange,
            child: _buildStack(),
          ),
          Container(
            color: Colors.yellow,
            child: BigImgs(),
          ),
          Container(
            color: Colors.orange,
            child: _buildStack(),
          ),
        ],
      ),
    );
  }
}

// Card卡片
Widget _buildCard() => SizedBox(
      height: 210,
      child: Card(
        child: Column(
          children: [
            ListTile(
              title: Text('1625 Main Street',
                  style: TextStyle(fontWeight: FontWeight.w500)),
              subtitle: Text('My City, CA 99984'),
              leading: Icon(
                Icons.restaurant_menu,
                color: Colors.blue[500],
              ),
            ),
            Divider(),
            ListTile(
              title: Text('(408) 555-1212',
                  style: TextStyle(fontWeight: FontWeight.w500)),
              leading: Icon(
                Icons.contact_phone,
                color: Colors.blue[500],
              ),
            ),
            ListTile(
              title: Text('costa@example.com'),
              leading: Icon(
                Icons.contact_mail,
                color: Colors.blue[500],
              ),
            ),
          ],
        ),
      ),
    );
//个人图像
Widget _buildStack() => Stack(
      alignment: const Alignment(0.6, 0.6),
      children: [
        // CircleAvatar(
        //   backgroundImage: AssetImage('https://picsum.photos/250?image=9'),
        //   radius: 100,
        // ),
        CircleAvatar(
          child: Image.network('https://picsum.photos/250?image=9'),
          backgroundColor: Color(0xffff0000),
          radius: 32.0,
          foregroundColor: Color(0x55000000),
        ),
        Container(
          decoration: BoxDecoration(
            color: Colors.black45,
          ),
          child: Text(
            'Mia B',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );