为了账号安全,请及时绑定邮箱和手机立即绑定

Flutter入门与案例实战

技术胖 Web前端工程师
难度入门
时长 2小时32分
学习人数
综合评分8.83
14人评价 查看评价
8.1 内容实用
9.0 简洁易懂
9.4 逻辑清晰
  • GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,   //每行个数
        mainAxisSpacing: 2.0,   //每行间距
        crossAxisSpacing: 2.0,  //每列间距
        childAspectRatio: 0.7  //长宽比
      ),


  •  GridView.count(
        padding: const EdgeInsets.all(10.0),
        crossAxisSpacing: 10.0,
        crossAxisCount: 3,
        children: <Widget>[
          const Text('I love'),
          const Text('I love'),
          const Text('I love'),
          const Text('I love'),
          const Text('I love'),
          const Text('I love'),
        ],
    ),


  • void main() => runApp(MyApp(
      items: List<String>.generate(1000, (i)=>'item $i')
    ));
    
    class MyApp extends StatelessWidget{
    
      final List<String> items;
      MyApp({Key key, @required this.items}): super(key:key);



    body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index){
          return ListTile(
              title: Text('${items[index]}'),
          );
        },
    )


  • body: ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.favorite_border),
          title: Text('favorite_border'),
          trailing: Icon(Icons.arrow_forward),
        ),ListTile(
          leading: Icon(Icons.favorite),
          title: Text('favorite'),
          trailing: Icon(Icons.arrow_forward),
        ),ListTile(
          leading: Icon(Icons.ac_unit),
          title: Text('ac_unit'),
          trailing: Icon(Icons.arrow_forward),
        ),ListTile(
          leading: Icon(Icons.android),
          title: Text('android'),
          trailing: Icon(Icons.arrow_forward),
        ),
        Image.network("https://img1.mukewang.com/szimg/5e4644f609ffdfa312000676-360-202.png"),
        Image.network("https://img2.mukewang.com/szimg/5e703f1408bd81a506000338-360-202.jpg"),
        Image.network("https://img2.mukewang.com/szimg/5e5621d0092c054612000676-360-202.png"),
        Image.network("https://img2.mukewang.com/szimg/5d1032ab08719e0906000338-360-202.jpg"),
        Image.network("https://img2.mukewang.com/szimg/5e6b4ede09bc3b4412000676-360-202.png"),
      ],
    ),


  • Image图片组件的使用

    • Image Widget的几种加入形式

    1. Image.asset:加载资源图片,会使打包时包体过大

    2. Image.network:网络资源图片,经常换的或者动态的图片

    3. Image.file:本地图片,比如相机照相后的图片预览

    4. Image.memory:加载到内存中的图片,Uint8List

    • Fit属性的详细讲解,(相当于小程序的mode)

    1. fit: BoxFit.(),
    • 图片的混合模式

    1. colorBlendMode: BlendMode.color
    • Repeat属性让图片重复

    1. repeat: ImageRepeat.(),


  • decoration: new BoxDecoration(
      gradient: const LinearGradient(
          colors: [
            Colors.purple,
            Colors.orange,
            Colors.cyan,
            Colors.deepPurple,
            Colors.pink,
            Colors.cyanAccent,
            Colors.redAccent,
            Colors.limeAccent
          ])
    ),

    渐变

  • Contains容器2

    • padding内边距属性

    • margin外边距属性

    • decoration属性制作彩色背景


    一,padding,margin内边距属性

    1. edgelnsets.all():统一设置

    2. Edgelnsets.fromLTRB(value1,value2,value3)


    二,decoration修饰器(不能与color一起,不然冲突)

    1. 设置容器的边框

    2. BoxDecoration Widget讲解

    3. LinearGradient设置背景颜色渐变


  • Container 有点类似Layout


    Container(
      child: Text('Hello Flutter',
      style:TextStyle(fontSize: 50.0,
          color:Colors.orange),),
      alignment: Alignment.center,
      width: 300.0,
      height: 400.0,
      color: Colors.purple,
    )


  • TextWidget文本组件

    TextAlign:文本对齐属性

    left/right/start/end 

    maxLines:文本显示的最大行数

    overflow:控制文本的溢出效果

    clip:直接截断

    ellipsis:省略号

    fade: 


    字体设置

    style:TextStyle

    fontSize: 18.0

    color:Color.fromARGB(255,255,150,0)

    decoration:TextDecoration.underline  下划线

    decorationStyle:TextDecorationStyle.solid 实线



  • 3-1 Flutter一切皆组件。 TextWidget的常用属性 TextAlign:文本对齐方式 textAlign:TextAlian.left(center,right,start,end), maxLines:文本显示的最大行数 overflow:控制文本的溢出效果 ocerflow:TextOverflow.clip(ellipsis,fade), Style的属性用法 style:TextStyle( fontSize:~,0, color:Color.fromARGB(A,R,G,B) decoration:TextDecoration.underline(none,libeThrongh,overline) decorationStyle:TextDecorationStyle.soild )
    00:05
    看视频
  • 升级FlutterSDK

    终端输入flutter upgrade或者删除sdk重新下载


    material.dart 基础样式


    StatelessWidget与StatefulWidget:后者用于动态的组件比如进度条,前者用于静态的,后者比前者使用的偏多


    R:点击后热加载,直接查看预览效果

    P:在虚拟机中显示网格,工作中经常使用

    O:切换Android和IOS的预览模式

    Q:退出调试预览模式

  • flutter 120fps超高性能

    fps:每秒传输帧数,每秒画面数

    第三方组件:https://github.com/Solido/awesome-flutter法国人总结的好用的组件。

    开始使用flutter的大厂:Alibaba Tencent JD

  • 跨平台:Linux、android、ios、fuchsia

    原生用户界面:它是原生的,让我们体验更好,性能更好

    开源免费:完全开源,可以进行商用

    cordova:混合式开发框架(Hybrid app)

    RN(React Native):原生app,以view为基础嵌入

    Flutter:在渲染技术上,选择自己实现(GDI),有更好的可控性

  • 跨平台:Linux、android、ios、fuchsia

    原生用户界面:它时原生的,让我们体验更好,性能更好

    开源免费:完全开源,可以进行商用

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


    void main() =>

        runApp(MyApp(items: new List<String>.generate(1000, (i) => 'Items $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: 'listView',

          home: Scaffold(

            appBar: AppBar(

              title: Text('flutter'),

            ),

            body: new ListView.builder(

                itemCount: items.length,

                itemBuilder: (context, index) {

                  return new ListTile(title: Text('${items[index]}'));

                }),

          ),

        );

      }

    }


    class MyList extends StatelessWidget {

      @override

      Widget build(BuildContext context) {

        // TODO: implement build

        return ListView(scrollDirection: Axis.horizontal, children: <Widget>[

          new Container(

            width: 380.0,

            child: new Image.network(

                'https://img3.mukewang.com/szimg/5dde5881088dd8da06000338-360-202.jpg'),

          ),

          new Container(

            width: 380.0,

            child: new Image.network(

                'https://img3.mukewang.com/szimg/5dde5881088dd8da06000338-360-202.jpg'),

          ),

          new Container(

            width: 380.0,

            child: new Image.network(

                'https://img3.mukewang.com/szimg/5dde5881088dd8da06000338-360-202.jpg'),

          ),

          new Container(

            width: 380.0,

            child: new Image.network(

                'https://img3.mukewang.com/szimg/5dde5881088dd8da06000338-360-202.jpg'),

          ),

        ]);

      }

    }


    class MyDyList extends State {

      @override

      Widget build(BuildContext context) {

        // TODO: implement build

        return ListView(scrollDirection: Axis.horizontal, children: <Widget>[

          new Container(

            width: 380.0,

            child: new Image.network(

                'https://img3.mukewang.com/szimg/5dde5881088dd8da06000338-360-202.jpg'),

          ),

          new Container(

            width: 380.0,

            child: new Image.network(

                'https://img3.mukewang.com/szimg/5dde5881088dd8da06000338-360-202.jpg'),

          ),

          new Container(

            width: 380.0,

            child: new Image.network(

                'https://img3.mukewang.com/szimg/5dde5881088dd8da06000338-360-202.jpg'),

          ),

          new Container(

            width: 380.0,

            child: new Image.network(

                'https://img3.mukewang.com/szimg/5dde5881088dd8da06000338-360-202.jpg'),

          ),

        ]);

      }

    }



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


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


    class MyApp extends StatelessWidget {

      @override

      Widget build(BuildContext context) {

        return MaterialApp(

          title: 'hello',

          home: Scaffold(

            appBar: AppBar(

              title: Text('flutter'),

            ),

            body: Center(

              child: new Container(

                //   child: new Text(

                //     '测试容器',

                //     style: TextStyle(fontSize: 25.0),

                //   ),

                //   alignment: Alignment.topLeft,

                //   width: 500.0,

                //   height: 300.0,

                //   //color: Colors.lightBlue,

                //   padding: const EdgeInsets.all(30.0),

                //   margin: const EdgeInsets.all(30.0),

                //   decoration: new BoxDecoration(

                //       //设置颜色渐变的效果

                //       gradient: const LinearGradient(

                //           colors: [Colors.lightBlue, Colors.purple, Colors.orange])),

                // ),

                child: new Image.network(

                  'http://q2clet0zz.bkt.clouddn.com/flutter/20191223105622.png',

                  scale: 2.0,

                  fit: BoxFit.cover,

                ),

                width: 500.0,

                height: 400.0,

                color: Colors.lightBlue,

              ),

            ),

          ),

        );

      }

    }



  • 动态数据展示

    <!--此处有图片-->

    <!--此处有图片-->

    08:51
    看视频
  • padding 内边距属性

    <!--此处有图片-->

  • style属性记录。

    <!--此处有图片-->

    11:07
    看视频
  • 常用属性记录

    <!--此处有图片-->

    01:20
    看视频
  • flutter 120fps超高性能

    fps:每秒传输帧数,每秒画面数

    第三方组件:https://github.com/Solido/awesome-flutter法国人总结的好用的组件。

    开始使用flutter的大厂:Alibaba Tencent JD


  • cordova:混合式开发框架(Hybrid app)

    RN(React Native):原生app,以view为基础嵌入

    Flutter:在渲染技术上,选择自己实现(GDI),有更好的可控性

  • 第三方组件地址:https://github.com/Solido/awesome-flutter

首页上一页12345下一页尾页

举报

0/150
提交
取消
课程须知
需要有Dart语言基础和VSCode基础
老师告诉你能学到什么?
1.Flutter和主流前端框架的对比 2.使用VSCode搭建Flutter开发环境 3.Flutter创建命令讲解 4.虚拟机的开启和基本使用 5.TextWidget文本组件的使用 6.Container容器组件的使用 7.Image图片组件的使用 8.ListView ,GridView列表组件使用 9.最新电影展示页面制作

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!