Flutter学习历程_flutter 历程-CSDN博客

本文链接：https://blog.csdn.net/u010194271/article/details/106405370

1.Container组件简介

1.Container组件简介

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome .....toFlutter'),
        ),
        body: Center(
          child: Container(
            child: new Text(
              "Hellow Word",
              style: TextStyle(fontSize: 40.0),
            ),
            alignment:Alignment.topLeft,
            width: 500.0,
            height: 400.0,
            padding: const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
            margin: const EdgeInsets.all(10.0),
            decoration: new BoxDecoration(
              gradient: const LinearGradient(colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]),
              border: Border.all(width: 2.0,color: Colors.red)
            ),

          ),
        ),
      ),
    );
  }
}

2.Image组件的使用

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome .....toFlutter'),
        ),
        body: Center(
          child: Container(
            child: new Image.network(
              'https://avatar.csdnimg.cn/0/5/D/3_u010194271.jpg',
              repeat: ImageRepeat.repeatX,
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

3.ListView组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'JsPangFlutter',
        home: Scaffold(
          appBar: new AppBar(title: new Text('ListView Widget')),
          body: new ListView(
            children: <Widget>[
              new ListTile(
                leading: new Icon(Icons.perm_camera_mic),
                title: new Text('perm_camera_mic'),
              ),
              new ListTile(
                leading: new Icon(Icons.perm_contact_calendar),
                title: new Text('perm_contact_calendar'),
              ),
              new Image.network(
                  'https://avatar.csdnimg.cn/0/5/D/3_u010194271.jpg'),
              new Image.network(
                  'https://avatar.csdnimg.cn/0/5/D/3_u010194271.jpg'),
              new Image.network(
                  'https://avatar.csdnimg.cn/0/5/D/3_u010194271.jpg'),
              new Image.network(
                  'https://avatar.csdnimg.cn/0/5/D/3_u010194271.jpg'),
            ],
          ),
        ));
  }
}

4.万事皆组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'JsPangFlutter',
        home: Center(
          child: Container(
            height: 200.0,
            child:MyList(),
          ),
        ));
  }
}

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        new Container(width: 180.0, color: Colors.lightBlue),
        new Container(width: 180.0, color: Colors.lightGreen),
        new Container(width: 180.0, color: Colors.orangeAccent),
      ],
    );
  }
}

5.列表组件，传值

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);

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'JsPangFlutter',
        home: Scaffold(
          appBar: new AppBar(title: new Text("ListView")),
          body: new ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return new ListTile(
                title: new Text('${items[index]}'),
              );
            },
          ),

        ));
  }
}

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        new Container(width: 180.0, color: Colors.lightBlue),
        new Container(width: 180.0, color: Colors.lightGreen),
        new Container(width: 180.0, color: Colors.orangeAccent),
      ],
    );
  }
}

6.网格

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JSJXF Flutter Demo',
      home: Scaffold(
          appBar: new AppBar(title: new Text('ListView Widget')),
          body: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 2.0,
                crossAxisSpacing: 2.0,
                childAspectRatio: 1.5),
            children: <Widget>[
              new Image.network(
                  'http://img5.mtime.cn/mg/2020/05/28/111843.63993498_285X160X4.jpg',fit: BoxFit.fill),
              new Image.network(
                  'http://img5.mtime.cn/mg/2020/05/28/102840.71908635_285X160X4.jpg',fit: BoxFit.fill),
              new Image.network(
                  'http://img5.mtime.cn/mg/2020/05/28/093352.16747651_285X160X4.jpg',fit: BoxFit.fill),
              new Image.network(
                  'http://img5.mtime.cn/mg/2020/05/27/210145.79060565_285X160X4.jpg',fit: BoxFit.fill),
            ],
          )),
    );
  }
}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JSJXF Flutter Demo',
      home: Scaffold(
          appBar: new AppBar(title: new Text('ListView Widget')),
          body: new Row(
            children: <Widget>[
              Expanded(
                  child: new RaisedButton(
                onPressed: () {},
                color: Colors.lightBlue,
                child: new Text('lightBlue'),
              )),
              Expanded(
                  child: new RaisedButton(
                onPressed: () {},
                color: Colors.orange,
                child: new Text('lightBlue'),
              )),
              Expanded(
                  child: new RaisedButton(
                onPressed: () {},
                color: Colors.pink,
                child: new Text('lightBlue'),
              ))
            ],
          )),
    );
  }
}

7.垂直布局

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JSJXF Flutter Demo',
      home: Scaffold(
          appBar: new AppBar(title: new Text('ListView Widget')),
          body: Center(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('I am JXF'),
                Expanded(child: Text('I am JXF I am JXF I am JXF')),
                Text('I am JXF')
              ],
            ),
          )),
    );
  }
}

8.布局层叠

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.8),
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage(
              'http://img5.mtime.cn/mg/2020/01/06/144226.95498850.jpg'),
          radius: 100.0,
        ),
        new Container(
          decoration: new BoxDecoration(color: Colors.lightBlue),
          padding: EdgeInsets.all(5.0),
          child: Text('JS 技术群'),
        )
      ],
    );
    return MaterialApp(
      title: 'Demo',
      home: Scaffold(
          appBar: new AppBar(title: new Text('Demo')),
          body: Center(
            child: stack,
          )),
    );
  }
}

9.路由导航父子界面

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hellowword/ui/page/oneDemo.dart';

void main() {
  runApp(MaterialApp(
    title: '导航演示01',
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('标题')),
      body: Center(
        child: RaisedButton(
          child: Text("查看商品详情页"),
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => new SecondScream()));
          },
        ),
      ),
    );
  }
}

class SecondScream extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('商品详情')),
      body: Center(
        child: RaisedButton(
          child: Text('返回'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

10.跳转传参数

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Product {
  final String title;
  final String description;

  Product(this.title, this.description);
}

void main() {
  runApp(MaterialApp(
    title: '导航的数据传递和接受',
    home: ProductList(
        products: List.generate(
            20, (i) => Product('Transformers商品 $i', '这是一个商品详情，编号是$i'))),
  ));
}

class ProductList extends StatelessWidget {
  final List<Product> products;

  ProductList({Key key, @required this.products}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(products[index].title),
            onTap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) =>
                          ProductDetail(product: products[index])));
            },
          );
        },
      ),
    );
  }
}

class ProductDetail extends StatelessWidget {
  final Product product;

  ProductDetail({Key key, @required this.product}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('${product.title}')),
        body: Center(
          child: Text('${product.description}'),
        ));
  }
}

11.页面跳转并返回参数跳转传参数

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(title: '页面跳转返回数据', home: FirstPage()));
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("找小姐姐要电话"),
      ),
      body: Center(
        child: RouteButton(),
      ),
    );
  }
}

class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        _navigateToXiaoJieJie(context);
      },
      child: Text('去找小姐姐'),
    );
  }
}

_navigateToXiaoJieJie(BuildContext context) async {
  final result = await Navigator.push(
      context, MaterialPageRoute(builder: (context) => XiaoJie()));
  Scaffold.of(context).showSnackBar(SnackBar(content: Text('$result')));
}

class XiaoJie extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('我是小姐姐')),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text('大长腿小姐姐'),
              onPressed: (){
                Navigator.pop(context,'大长腿小姐姐:155555555');
                
              },
            ),
            RaisedButton(
              child: Text('小蛮腰小姐姐'),
              onPressed: (){
                Navigator.pop(context,'小蛮腰小姐姐:15555888888');

              },
            ),
          ],
        ),
      ),
    );
  }
}

12.静态资源和项目图片的处理

在 pubspec.yaml 文件中加入下面代码（assets必须在flutter下），在项目目录下心间images目录，把图片放在里面

flutter:
  assets:
    - images/iv_jxf_header.jpg

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.asset("images/iv_jxf_header.jpg"),
    );
  }
}