一直想用Flutter擼個(gè)實(shí)戰(zhàn)的教程，但苦于沒有好的主題，偶然間發(fā)現(xiàn)某美食App上的內(nèi)容還可以，隨即決定仿個(gè)Flutter版的。本教程適合有編程基礎(chǔ)人員閱讀，開發(fā)環(huán)境為VSCode+Flutter+Dart（開發(fā)環(huán)境配置請自行百度解決。）
下面先來個(gè)效果圖，由于視頻錄制轉(zhuǎn)gif太大，下面GIF大概展示了下功能，后面會(huì)介紹每個(gè)具體的功能實(shí)現(xiàn)。
接下來我們將要實(shí)現(xiàn)home界面長啥樣，主要由以下幾個(gè)部分構(gòu)成：
下面我們就一步步來實(shí)現(xiàn)這個(gè)界面。
在VSCode中新建一個(gè)Flutter工程，命名為iCooker，之后VSCode會(huì)自動(dòng)生成一個(gè)項(xiàng)目目錄并生成相關(guān)文件夾及文件。其中有個(gè)main.dart文件，打開該文件會(huì)發(fā)現(xiàn)最上面有句void main()=>runApp(MyApp())的語句，而void main()就是程序的入口函數(shù)。 在main.dart文件中我們可以設(shè)置App的主題色、字體樣式等全局變量。
接下來我們要改造main.dart文件中的內(nèi)容，讓程序在進(jìn)入home界面之前先進(jìn)入一個(gè)SplashPage界面(下一節(jié)介紹)，先來看看改造的main.dart文件里都有些啥。
-
main
/**
* main.dart
**/
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:icooker/pages/splash_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, //關(guān)閉banner上的Debug標(biāo)識(shí)
theme:ThemeData(
primarySwatch: Colors.blue,
),
home: SplashPage(),
);
}
}
main.dart里暫時(shí)我們就寫這么多，后面我們會(huì)慢慢加入新的功能進(jìn)去。其中MyApp 是一個(gè)StatefulWidget部件，這是一個(gè)有狀態(tài)的widget意思是我們可以在這里進(jìn)行某些狀態(tài)值的刷新操作，只要調(diào)用setState(() {})方法中實(shí)現(xiàn)相關(guān)業(yè)務(wù)代碼即可，debugShowCheckedModeBanner: false這句是關(guān)閉debug模式下模擬器或真機(jī)右上角debug標(biāo)識(shí)的。
好，下節(jié)我們將要正式開始相關(guān)界面的業(yè)務(wù)實(shí)現(xiàn)了。
