Flutter基础介绍与实作-Day9 Hello Flutter(3)

First Flutter App
看完上一篇大家对Flutter的架构应该都有初步的了解了。今天我们就从Hello World的写法开始讲起吧！
首先我们先把我们的工作去叫出来，开启lib资料夹里面有一个main.dart的档案打开它

右边的画面会看到有很多的注解，这是在跟你说明每个元件的用途，假设你看完了或是不想看也没关系，後面都有每个区域程序码的介绍，那我们先来把这些注解给删掉，你可以徒法炼钢一行一行删，也可以使用快速法。
先按下ctrl + R然後会跑出搜寻框框，在上面输入/([\S\s]+?})，勾选Regex使用正规搜寻，将Filter改成In Comment，完成後按下Replace all，最後在使用ctrl + alt + L排版就可以了
整理前

整理後

程序的开端

大家还记得Dart语法都是从main()开始的吗？现在换到Flutter也是一样的喔！从main开始并且执行runApp的这个function，它会把所设定widget填满整个萤幕，这里的widget就是MyApp
这里我们来做个Hello World的测试吧！只要把程序码换成下面的就好

这边作一个简单的讲解

• Center：让文字(Text widget)置中
• Text：用来显示文字，需要额外设置文字方向，由左至右(ltr)、由右至左(rtl)
  补充说明，这两个都是widget元件
  MyApp Class
  回到原本的程序，这个class是继承自StatelessWidget，代表这个widget被建立後就不会再被修改了

当widget被建立後会呼叫build这个function，然後回传要显示的内容，这边要回传的有三个参数，分别是title、theme以及home

• title：这个是用在设定标题，在App里面是看不到，只会显示在手机管理App程序的地方

• theme：这边是管理介面的颜色风格等等

• home：这边是管理App的首页，接收widget的物件

原本的

修改颜色和文字後

MyHomePage
这里呢和上面MyApp的区域不太一样，MyHomePage是继承StatefulWidget，我相信聪明的大家一定知道Stateful的意思就是它的状态是会随时间而改变的，所以就必须有一个function来控制它，而这个function就是createState

_MyHomePageState
前面的那个_代表的是private class
这边使用的function是build这个function，每当我们将状态更新後，build就会帮我们重新绘制widget并且回传，这边回传的widget是Scaffold widget，而他们常见元件有AppBar、NavigationBar、Drawer等等(我们明天在正式的跟他们见面吧！)

前面有说到状态更，build就会重新绘制，为什麽它会知道呢？就是因为在FloatingActionButton中onPressed使用的function incrementCounter ，里面的setState就是Stateful的核心重点，就是透过它去通知，build才会知道要工作了，所以App的画面才会被更新

今日总结
我们今天介绍了Flutter范例程序的一部分，希望大家都有了解了，明天我们就来认识基础widget有哪些，还有该如何运用它来制作漂亮的介面