Flutter 初體驗

一、flutter介紹

flutter關(guān)聯(lián)詞

flutter誕生:


工具:Android Studio和xcode


先安裝Dart和Flutter插件




入門: 在macOS上搭建Flutter開發(fā)環(huán),官網(wǎng):https://flutterchina.club/setup-macos/#%E8%BF%90%E8%A1%8C-flutter-doctor

執(zhí)行flutter doctor(保證以下幾個打鉤的):

按照官網(wǎng)配置出現(xiàn)問題時參考鏈接:http://www.itdecent.cn/p/4be5a9e094bc


二、創(chuàng)建flutter項目


三、ios下:

1、ios模擬器:


2、在配置 ios真機時注意:


點擊try again時 會提示不成功 更換bundle identifier (鏈接真機的情況下)



添加為信任者


三、Android安裝和配置


真機需要在開發(fā)者打開usb調(diào)試

檢測安裝的設(shè)備

四、安裝flutter和Dart插件


打開preferences后:安裝dart、flutter后重啟

五、flutter項目工程結(jié)構(gòu)


ios、android、lib(main.dart)、test(單元測試)

藍色框,即lib下的main.dart是整個程序的入口!

main.dart里的代碼如下:


對此做如下簡單說明:

1、Material是一個對移動端和web端的標準的可視化語言。Flutter提供了豐富的Material widgets(容器)

2、這里通過繼承StatelessWidget是的該app自己也變成了一個widget,在Flutter中,基本上每一個事物都是一個widget,包括alignment、padding和layout。

3、widget的主要工作是提供build()函數(shù)(方法),用來描述和表達其中的其他的widget的展示方式

4、單獨運行ios :打開ios包,雙擊Runner.xcworkspace文件

5、安卓:通過android studio打開

6、使用外部package

這里使用的是外部包english_words,和其他開源包一樣,可以在這里找到。

? ? 6.1、pubspec文件管理著Flutter app的資源。在pubspec.yaml文件中,添加english_words和版本號到依賴表中,如下:

????6.2、保存的時候,Android studio窗口上方會出現(xiàn)下圖:

然后點擊黃色中的字進行依賴安裝即可,控制臺會打印如下信息:


? ? 6.3、在main.dart文件中的最上面引入,Android studio會有提示。當(dāng)然,如果你在下面沒有使用該package,這里在展示上會有些許不同。

? ? 6.4、對main.dart內(nèi)容做一個修改,即對該庫的使用,具體增加內(nèi)容如下:


? ? 6.5、保存后點擊Android studio的右上角的閃電??按鈕,做刷新,你會發(fā)現(xiàn)每次點擊,都會得到不一樣的內(nèi)容。

六、flutter底部導(dǎo)航搭建

lib文件入口

新建tab_navigator.dart

輸入快捷鍵 stf創(chuàng)建 模板

class 命名?TabNavigator?

項目有報錯,按住錯誤那,按option+回車 選出導(dǎo)入頭文件


StatefulWidget:

Widge()


打開 commond+光標選中跳入類實現(xiàn)

commond+H 打開Widge

return Scaffold(

)

1.設(shè)置文字&文字大小&顏色&行數(shù)限制&文本對齊



官網(wǎng):https://api.flutter.dev/index.html

詳細參考:http://www.itdecent.cn/p/9e6c470ea5bf

BottomNavigation類文檔:https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

小程序文檔:

https://mp.weixin.qq.com/s/Unox7RPZQsyxSiH04DiGtw

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容