一年半前玩過(guò)flutter，忘光光...現(xiàn)在是時(shí)候重新拾取了。~
創(chuàng)新互聯(lián)公司成立于2013年，先為瑪沁等服務(wù)建站，瑪沁等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為瑪沁企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
啟動(dòng)頁(yè)一般只放圖片或者加幾行文字。
1、創(chuàng)建好flutter項(xiàng)目之后，在lib文件下面新建launch.dart或xx.dart.
2、在根目錄下新建images文件夾，如已有直接放入圖片
3、flutter_yijiake.iml中加入注入該圖片，并注意空格
4、在根目錄下的test/widget_test.dart中更改默認(rèn)的啟動(dòng)頁(yè)為當(dāng)前的啟動(dòng)頁(yè)路徑
5、最后重新設(shè)置啟動(dòng)時(shí)的頁(yè)面
6、非常簡(jiǎn)單的啟動(dòng)頁(yè)面放logo圖片
值得一說(shuō)的是，flutter框架的UI組件需要已new 組件的形式展開。
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #01 環(huán)境搭建 「14:03」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #02 Dart 語(yǔ)言 「17:49」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #03 建立 Android studio 虛擬設(shè)備 「04:12」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #04 建立第一個(gè)項(xiàng)目 「08:23」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #05 安裝配置過(guò)程中可能遇到的問(wèn)題（沒(méi)遇到者可以跳過(guò)） 「05:07」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #06 運(yùn)行 iOS 模擬器 「04:07」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #07 Flutter 概述 「06:15」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #08 Scaffold AppBar 「Pro」「06:50」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #09 文檔和快捷鍵 「Pro」「02:36」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #10 顏色 Colors 「Pro」「05:47」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #11 自定義字體 fonts 「Pro」「05:09」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #12 hot reload StatelessWidget 「Pro」「04:56」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #13 使用圖片 「Pro」「04:59」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #14 使用圖標(biāo) - Icon 「Pro」「01:27」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #15 Button 按鈕使用指南 「Pro」「04:35」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #16 Container 和 Padding 「Pro」「04: 52」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #17 Row 「Pro」「05:24」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #18 Column 「Pro」「05:36」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #19 Flutter Outline Shortcuts 「Pro」「03:18」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #20 Expanded Widgets 「Pro」「06:06」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #21 實(shí)戰(zhàn)開始 「Pro」「11:42」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #22 換個(gè)編輯器 - Visual Studio Code 「Pro」「04:50」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #23 Stateful vs Stateless Widget 「Pro」「09:45」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #24 列表處理 「Pro」「04:54」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #25 自定義 class 「Pro」「05:37」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #26 card widget 「Pro」「04:26」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #27 Extracting Widgets 「Pro」「06:59」
Flutter 零基礎(chǔ)入門實(shí)戰(zhàn)視頻教程 #28 刪除 - Functions as Parameters - 完結(jié) - 進(jìn)入實(shí)戰(zhàn)課 「Pro」「04:35」
近來(lái)閑暇時(shí)間一直在做Flutter,閃屏頁(yè)是一個(gè)比較常見(jiàn)的需求,網(wǎng)上的閃屏頁(yè)教程大部分是那種類似于廣告頁(yè),而非iOS中的 LaunchScreen 性質(zhì)的閃屏頁(yè).按照原來(lái)的方案我們要配置閃屏頁(yè)的話,我們需要同時(shí)配置兩端的閃屏頁(yè),那么有沒(méi)有比較簡(jiǎn)單的方案來(lái)配置閃屏頁(yè)呢? 毋庸置疑,當(dāng)然是有了,那就是Flutter的插件 - flutter_native_splash . 接下來(lái)我們就來(lái)看一下具體應(yīng)該怎么使用這個(gè)插件.
首先把 flutter_native_splash 導(dǎo)入到工程的 pubspec.yaml 中.這里需要注意的是需要放在 dev_dependencies 下,而不是 dependencies .具體如下所示.
接下來(lái)我們就來(lái)配置 flutter_native_splash ,在配置之前我們看一下 flutter_native_splash 的可配置項(xiàng).
例如,我現(xiàn)在只有一個(gè)logo圖片,那么我想生成iOS和android兩端的閃屏頁(yè),這時(shí)候我只需在 pubspec.yaml 如下設(shè)置即可.
當(dāng)然了,如果你有其他配置可以自行進(jìn)行添加.
配置完成了,我們?cè)撊绾紊赡?這時(shí)候需要我們打開終端 cd 到我們的工程目錄下.如果是Android Studio 或者 VSCode 默認(rèn)就是在當(dāng)前工程目錄下.
然后我們需要執(zhí)行下面的三個(gè)命令來(lái)生成閃屏頁(yè)
每一次都敲三個(gè)命令實(shí)屬麻煩,我們把上訴的三個(gè)命令整合成一個(gè)命令,如下所示.
那么,我們不想使用該插件生成的閃屏頁(yè)該怎么辦呢?我們只需要執(zhí)行下面命令即可.
注:每一次更換圖片都是需要重新執(zhí)行命令重新生成.
OK,上面就是關(guān)于 flutter_native_splash 的使用全部?jī)?nèi)容,其實(shí)比較簡(jiǎn)單,如果需要定制化的,建議還是各自平臺(tái)配置各自的閃屏頁(yè).如果有任何問(wèn)題歡迎在評(píng)論區(qū)批評(píng)指導(dǎo),感謝大家了.
在編寫幾個(gè) Flutter 項(xiàng)目后，發(fā)現(xiàn) Flutter 的強(qiáng)大之處在于業(yè)務(wù)中所有用到的控件以及場(chǎng)景都有對(duì)應(yīng)的處理方案；而 Dart 語(yǔ)言也與 Java 、 Kotlin 類似，所以對(duì) Android 開發(fā)者來(lái)說(shuō)門檻非常低；特意記錄一下常用的控件及其使用：
StatelessWidget 不需要額外的創(chuàng)建 State
StatefulWidget 創(chuàng)建 State 類，并可以在其中保存一些狀態(tài)
only 可以單獨(dú)設(shè)置每個(gè)方向的內(nèi)邊距
類似于 LinearLayout 中的 orientation 設(shè)置為 vertical ， mainAxisAlignment 表示豎向的一個(gè)對(duì)齊方式， crossAxisAlignment 表示橫向的對(duì)齊方式
與 Column 相反，主軸是橫向，對(duì)齊方式類似， crossAxisAlignment 表示豎向的對(duì)齊方式
類似 SizedBox ，一個(gè)容器，但是主要功能是有一個(gè) decoration —— 裝飾器，作用是繪制背景，或者使用 item 中的陰影
棧，先入后出，類似于 Android 上的 FrameLayout
通常配合 Stack 使用，固定顯示在某一個(gè)位置
配合多 child 使用，會(huì)填充剩余的空間
Image 功能強(qiáng)大，使用不同的方法可以加載不同來(lái)源的圖片
看到這些方法，突然覺(jué)得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形狀的圖片，無(wú)論是圓形還是五角星都不在話下，然而 Android 要實(shí)現(xiàn)不規(guī)則的形狀，可是要下不少功夫的。
名字和 Android 的一模一樣，但是用法卻比 Android 的簡(jiǎn)單很多：
主要就是 itemCount 與 itemBuilder ,其余就是配置樣式， itemBuilder 需要返回一個(gè) widget ，當(dāng)然了，每個(gè) ListView 都有其對(duì)應(yīng)的 item ，在里面的方法中編寫 widget 即可
與 ListView 類似，但是需要有一個(gè) delegate 類，作用是設(shè)置有多少列，每一列之間的間距是多少
GridView 沒(méi)有 build ， children 表示所有的子 view
最常用的控件之一，有非常多的樣式， Flutter 中通常是使用裝飾器來(lái)處理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下
在Material的設(shè)計(jì)準(zhǔn)則里面，tabs是一個(gè)常用的模塊。Flutter里面包含了 material library 創(chuàng)建tab布局的簡(jiǎn)便方法
為了使tab起作用，我們需要保持選中的tab和相關(guān)內(nèi)容同步。這就是 TabController 的職責(zé)。
我們可以手動(dòng)創(chuàng)建 TabController ，也可以使用 DefaultTabController 小部件。使用 DefaultTabController 是最簡(jiǎn)單的選項(xiàng)，因?yàn)樗鼘槲覀儎?chuàng)建一個(gè) TabController ，并使它可用于所有子類Widget。
現(xiàn)在我們已經(jīng)有個(gè)一個(gè) TabController ,我們可以 TabBar Widget去使用創(chuàng)建我們的tab。在這個(gè)示例中，我們將會(huì)在一個(gè) AppBar 下.創(chuàng)建一個(gè)包含3個(gè) Tab Widgets 的 TabBar 。
默認(rèn)情況下， TabBar 在Widget樹中查找最近的 DefaultTabController 。如果是手動(dòng)創(chuàng)建的 TabController ，則需要將其傳遞到“TabBar”。
既然我們有了選項(xiàng)卡，那么我們就需要在選擇選項(xiàng)卡時(shí)顯示相關(guān)的內(nèi)容。因此，我們將使用 TabBarView Widget.
備注： 順序很重要，必須與 TabBar 中的選項(xiàng)卡的順序相對(duì)應(yīng)！
1. Flutter初步探索（二）使用Tabs
1. Working with Tabs
重慶分公司
重慶分公司
