Flutter学习之路（一）

最新推荐文章于 2024-08-13 08:32:23 发布

僅此而已c

最新推荐文章于 2024-08-13 08:32:23 发布

阅读量2k

点赞数 10

文章标签： flutter

本文链接：https://blog.csdn.net/w329300817/article/details/114573716

版权

作为一名实际开发近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的初学者朋友有些帮助，有什么问题欢迎留言探讨，我们一起努力学习进步，谢谢各位！