自学Flutter(一)

因为是根据网上一些大神博客包括简书等等的学习网站进行一个自学的小汇总,所以也希望可以帮助到和我一样自学Flutter的同学。
首先 第一步:
先创建一个Flutter的APP,在Android Studio中选择Flutter Application来进行创建,之后就会创建出来一个Flutter的App,如图:
自学Flutter(一)_第1张图片
之后呢我们可以看到,打开的不再是熟悉的MainActivity和activity_main.xml了,而是自动帮助我们打开了另一个文件main.dart,没错,所有我们目前关于Flutter的一切代码将要在这进行编写,但是我们学看见,main.dart里面自动生成了很多代码,其实在刚学习Flutter的时候呢还是不要去过多的研究这些自动生成的代码(主要是因为看不懂),当然,如果你是一个对于Flutter和Dart有过充分了解的也可以试着去理解一下。
下面就来带大家编写一个代码学习中最重要的“Hello World”
首先,将整个main.dart中的所有代码除了上面的main()方法和import之外全部删除,然后加上以下代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

现在,我们可以运行一下整个项目,你应该看到如下界面
自学Flutter(一)_第2张图片
现在呢我们就已经将学习Flutter最关键的一步踏出了。
现在我们来看代码

 return new MaterialApp(//创建一个app
      title: 'Welcome to Flutter',//当前显示页面的标题
      home: new Scaffold(
        appBar: new AppBar(//头部蓝色标题
          title: new Text('Welcome to Flutter'),//标题内容
        ),
        body: new Center(
          child: new Text('Hello World'),//正中心的内容
        ),
      ),
    );

看到了这里,我相信很多对于Dart语言没有任何基础的小伙伴都感觉到了头疼,因为Flutter在编写方式和代码方面和原来的Android代码编写有很大的不同,这里,如果又想学习Dart语言的小伙伴:[dart语言学习][(https://blog.csdn.net/qq_30938445/article/details/88931145)
之后我们来进行下一步的操作。
相信大家对于Android开发很熟悉的小伙伴对于添加依赖一定不陌生,可是在Flutter中又该如何添加我们所需要的对应依赖呢,首先打开pubspec.yaml文件,找到一下代码

自学Flutter(一)_第3张图片
找到如上代码我们就可以愉快的添加我们开发所需要的依赖了,所有我们需要添加的依赖,只需要将它放在

cupertino_icons: ^0.1.2
//这里放需要添加到依赖

这行代码下面放我们需要的依赖即可,之后我们点击右上角的Package get来进行更新依赖即可,之后,在控制台我们就可以看到如下
在这里插入图片描述
说明依赖已经添加完成了,之后我们回到main.dart进行手动导包(Flutter好像目前只支持手动导包)

import 'package:english_words/english_words.dart';//添加依赖包

但是我们会发现现在这行代码是灰色的,是因为我们在代码中还没有正式的用到该包,所以是灰色的。
之后我们就可以愉快的使用已经导入完成的依赖包了。
目前笔者只学到这里,更多内容看下一期吧。

你可能感兴趣的:(自学Flutter(一))