Flutter学习之路(一)

作为一名实际开发近10年的Android程序员,对于前端技术不断的更新,有着自己的迷茫,不过身边有人在不断学习和进步,倍感压力。

闲言少叙,开始正题,众所周知flutter是谷歌的移动UI框架,可以快速在Android和iOS上构建高质量的原生用户界面。根据实际的需要与自己想要进步的前提下,决定开始最最最最浅显的学习与研究。

首先,搭载环境,网上类似的教学已经有很多了,按照步骤+细心一些应该就没问题了。推荐一篇搭建flutter环境的文章,没时间搜索的朋友可以直接去看一下(https://blog.csdn.net/smxueer/article/details/82051118)。

那么,我用的开发工具是Android studio。一个新的语言入门的第一部无非就是大家都很熟悉的“hello world ”显示。好嘞,直接上代码开整:

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

void main() {
  runApp(MyApp());
}

// 创建一个继承自Stateless的Widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 我们想使用 material 风格的应用,所以这里用 MaterialApp
    return MaterialApp(
      // 移动设备使用这个 title 来表示我们的应用。具体一点说,在 Android 设备里,我们点击
      // recent 按钮打开最近应用列表的时候,显示的就是这个 title。
      title: 'Flutter入门',
      // 应用的“主页”
      home: Scaffold(
        appBar: AppBar(
          title: Text('标题'),
        ),
        // 我们知道,Flutter 里所有的东西都是 widget。为了把按钮放在屏幕的中央,
        // 这里使用了 Center(它是一个 widget)。
        body: Center(
          child: Text('hello world'),
        ),
      ),
    );
  }
}

这样,直接运行就能在手机上显示“hello world”了。

接下来,我想把显示“hello world”的地方换成一个按钮,并且点击按钮,弹出Toast,首先要添加Toast的依赖,如下:

在pubspec.yaml中添加:

fluttertoast: ^4.0.1

直接看代码:

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

void main() {
  runApp(MyApp());
}

// 创建一个继承自Stateless的Widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 我们想使用 material 风格的应用,所以这里用 MaterialApp
    return MaterialApp(
      // 移动设备使用这个 title 来表示我们的应用。具体一点说,在 Android 设备里,我们点击
      // recent 按钮打开最近应用列表的时候,显示的就是这个 title。
      title: 'Flutter入门',
      // 应用的“主页”
      home: Scaffold(
        appBar: AppBar(
          title: Text('标题'),
        ),
        // 我们知道,Flutter 里所有的东西都是 widget。为了把按钮放在屏幕的中央,
        // 这里使用了 Center(它是一个 widget)。
        body: Center(
          child: RaisedButton(
            // 用户点击时候调用
            onPressed: () {
              Fluttertoast.showToast(
                  msg: "点击了按钮",
                  gravity: ToastGravity.BOTTOM,
                  timeInSecForIosWeb: 1,
                  backgroundColor: Colors.black45,
                  textColor: Colors.white,
                  fontSize: 16.0);
            },
            child: Text('press'),
          ),
        ),
      ),
    );
  }
}

最后在按钮的上方添加一张网络图片,有的时候由于网络问题或者图片证书问题无法显示,所以要一些预加载设置和占位图,先添加图片的配置,如下:

在根目录下创建文件夹images,在其文件夹里创建两个文件夹,如下图:

并且在pubspec.yaml中添加:

以上两步都完成后,直接上代码:

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

void main() {
  runApp(FirstApp());
}

class FirstApp extends StatelessWidget {
  // 重写build 方法,build 方法返回值为Widget类型,返回内容为屏幕上显示内容。
  @override
  Widget build(BuildContext context) {
    // MaterialApp 控制界面风格为安卓风格
    // CupertinoApp 界面风格为iOS 风格
    // TODO: implement build
    return MaterialApp(
      title: "Flutter入门",
      // debugShowCheckedModeBanner: false,
      // Scaffold:脚手架 用于展示基础框架结构,如appBar、body、bottomNavigationBar
      home: Scaffold(
        // AppBar:相当于iOS 的导航栏
        appBar: AppBar(
          // AppBar上的显示内容
          // Text 用于展示文本内容,相当于iOS中的UILabel
          title: Text("首页"),
        ),
        // body:AppBar及BottomNavigationBar之间展示的内容
        // Center 是用于把子Widget 居中的Widget
        body: Card(
            child: Column(
          children: [
            new FadeInImage.assetNetwork(
              placeholder: 'images/logo.png',
              image: 'http://haiguo.oss-cn-beijing.aliyuncs.com/goods/360e1d0da22c2fcd9d81961d916abed4de6a4aff.jpg',
              fit: BoxFit.fill,
            ),
            RaisedButton(
              child: Text('press'),
              onPressed: () {
                print('pressIndex:点击了按钮');
                Fluttertoast.showToast(
                    msg: "点击了按钮",
                    gravity: ToastGravity.BOTTOM,
                    timeInSecForIosWeb: 1,
                    backgroundColor: Colors.black45,
                    textColor: Colors.white,
                    fontSize: 16.0);
              },
            ),
          ],
        )),
      ),
    );
  }
}

 好了,今天要学习记录的3个浅显的知识点就完成了,包括1.显示“hello world”;2.添加一个按钮,并且点击按钮显示Toast消息;3.显示一张网络图片,并且有本地图片占位。

以上几点希望对刚刚接触flutter的初学者朋友有些帮助,有什么问题欢迎留言探讨,我们一起努力学习进步,谢谢各位!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值