一区二区三区欧美日韩-一区二区三区欧美-一区二区三区免费在线视频-一区二区三区免费在线观看-久久精品店-久久精品第一页

歡迎您光臨深圳塔燈網絡科技有限公司!
電話圖標 余先生:13699882642

網站百科

為您解碼網站建設的點點滴滴

Flutter 創建第一個應用程序

發表日期:2018-06 文章編輯:小燈 瀏覽次數:1770

歡迎訪問我的原文網址,查看網站效果及更多內容

主要介紹下如何用Flutter創建一個應用程序,程序一步步由簡單到復雜,操作步驟來自官方,我覺得官方的已經寫得挺好的了,我這里就搬過來,方便閱讀,先查看下應用程序運行效果:

image

第1步: 創建 Flutter app

a. 創建一個簡單的、基于模板的Flutter應用程序,按照創建您的第一個Flutter應用中的指南的步驟, 然后將項目命名為startup_namer(而不是myapp),接下來你將會修改這個應用來完成最終的APP。

在這個示例中,你將主要編輯Dart代碼所在的 lib/main.dart 文件,

提示: 將代碼粘貼到應用中時,縮進可能會變形。您可以使用Flutter工具自動修復此問題: Android Studio / IntelliJ IDEA: 右鍵單擊Dart代碼,然后選擇 Reformat Code with dartfmt. VS Code: 右鍵單擊并選擇 Format Document. Terminal: 運行 flutter format <filename style="box-sizing: border-box;">. 替換 lib/main.dart. 刪除lib / main.dart中的所有代碼,然后替換為下面的代碼,它將在屏幕的中心顯示“Hello World”.</filename>

import 'package:flutter/material.dart';void main() => runApp(new MyApp());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'), ), ), ); } }

b. 運行應用程序,你應該看到如下界面.

image

分析

本示例創建一個Material APP。Material是一種標準的移動端和web端的視覺設計語言。 Flutter提供了一套豐富的Material widgets。

main函數使用了(=>)符號, 這是Dart中單行函數或方法的簡寫。

該應用程序繼承了 StatelessWidget,這將會使應用本身也成為一個widget。 在Flutter中,大多數東西都是widget,包括對齊(alignment)、填充(padding)和布局(layout)

Scaffold 是 Material library 中提供的一個widget, 它提供了默認的導航欄、標題和包含主屏幕widget樹的body屬性。widget樹可以很復雜。

widget的主要工作是提供一個build()方法來描述如何根據其他較低級別的widget來顯示自己。

本示例中的body的widget樹中包含了一個Center widget, Center widget又包含一個 Text 子widget。 Center widget可以將其子widget樹對其到屏幕中心。

第2步: 使用外部包(package)

a. 在這一步中,您將開始使用一個名為english_words的開源軟件包 ,其中包含數千個最常用的英文單詞以及一些實用功能.

您可以 在pub.dartlang.org上找到english_words軟件包以及其他許多開源軟件包

pubspec文件管理Flutter應用程序的assets(資源,如圖片、package等)。 在pubspec.yaml中,將english_words(3.1.0或更高版本)添加到依賴項列表,如下面高亮顯示的行:

dependencies: flutter: sdk: fluttercupertino_icons: ^0.1.0 english_words: ^3.1.0

b. 在Android Studio的編輯器視圖中查看pubspec時,單擊右上角的 Packages get,這會將依賴包安裝到您的項目。您可以在控制臺中看到以下內容:

flutter packages get Running "flutter packages get" in startup_namer... Process finished with exit code 0

c. 在 lib/main.dart 中, 引入 english_words, 如高亮顯示的行所示:

import 'package:flutter/material.dart'; import 'package:english_words/english_words.dart';

在您輸入時,Android Studio會為您提供有關庫導入的建議。然后它將呈現灰色的導入字符串,讓您知道導入的庫尚未使用(到目前為止)

d. 使用 English words 包生成文本來替換字符串“Hello World”.

Tip: “駝峰命名法” (稱為 “upper camel case” 或 “Pascal case” ), 表示字符串中的每個單詞(包括第一個單詞)都以大寫字母開頭。所以,“uppercamelcase” 變成 “UpperCamelCase”

進行以下更改, 如高亮部分所示:

import 'package:flutter/material.dart'; import 'package:english_words/english_words.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final wordPair = new WordPair.random(); 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'), child: new Text(wordPair.asPascalCase), ), ), ); } }

如果應用程序正在運行,請使用熱重載按鈕 (lightning bolt icon) 更新正在運行的應用程序。每次單擊熱重載或保存項目時,都會在正在運行的應用程序中隨機選擇不同的單詞對。 這是因為單詞對是在 build 方法內部生成的。每次MaterialApp需要渲染時或者在Flutter Inspector中切換平臺時 build 都會運行.

image

第3步: 添加一個 有狀態的部件(Stateful widget)

Stateless widgets 是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.

Stateful widgets 持有的狀態可能在widget生命周期中發生變化. 實現一個 stateful widget 至少需要兩個類:

a. 一個 StatefulWidget類。
b. 一個 State類。 StatefulWidget類本身是不變的,但是 State類在widget生命周期中始終存在.
在這一步中,您將添加一個有狀態的widget-RandomWords,它創建其State類RandomWordsState。State類將最終為widget維護建議的和喜歡的單詞對。

a. 添加有狀態的 RandomWords widget 到 main.dart。 它也可以在MyApp之外的文件的任何位置使用,但是本示例將它放到了文件的底部。RandomWords widget除了創建State類之外幾乎沒有其他任何東西

class RandomWords extends StatefulWidget { @override createState() => new RandomWordsState(); }

b. 添加 RandomWordsState 類.該應用程序的大部分代碼都在該類中, 該類持有RandomWords widget的狀態。這個類將保存隨著用戶滾動而無限增長的生成的單詞對, 以及喜歡的單詞對,用戶通過重復點擊心形 ?? 圖標來將它們從列表中添加或刪除。

你會一步一步地建立這個類。首先,通過添加高亮顯示的代碼創建一個最小類

class RandomWordsState extends State<RandomWords> { }

c. 在添加狀態類后,IDE會提示該類缺少build方法。接下來,您將添加一個基本的build方法,該方法通過將生成單詞對的代碼從MyApp移動到RandomWordsState來生成單詞對。

將build方法添加到RandomWordState中,如下面高亮代碼所示

class RandomWordsState extends State<RandomWords> { @override Widget build(BuildContext context) { final wordPair = new WordPair.random(); return new Text(wordPair.asPascalCase); } }

d. 通過下面高亮顯示的代碼,將生成單詞對代的碼從MyApp移動到RandomWordsState中

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //final wordPair = new WordPair.random();// 刪除此行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(wordPair.asPascalCase), child: new RandomWords(), ), ), ); } }

重新啟動應用程序。如果您嘗試熱重載,則可能會看到一條警告:

Reloading... Not all changed program elements ran during view reassembly; consider restarting.

這可能是誤報,但考慮到重新啟動可以確保您的更改在應用界面中生效。

應用程序應該像之前一樣運行,每次熱重載或保存應用程序時都會顯示一個單詞對。

image

第4步: 創建一個無限滾動ListView

a. 在這一步中,您將擴展(繼承)RandomWordsState類,以生成并顯示單詞對列表。 當用戶滾動時,ListView中顯示的列表將無限增長。 ListView的builder工廠構造函數允許您按需建立一個懶加載的列表視圖。

向RandomWordsState類中添加一個suggestions列表以保存建議的單詞對。 該變量以下劃線()開頭,在Dart語言中使用下劃線前綴標識符,會強制其變成私有的。

另外,添加一個biggerFont變量來增大字體大小

class RandomWordsState extends State<RandomWords> { final _suggestions = <WordPair>[];final _biggerFont = const TextStyle(fontSize: 18.0); ... }

b. 向RandomWordsState類添加一個 _buildSuggestions() 函數. 此方法構建顯示建議單詞對的ListView。

ListView類提供了一個builder屬性,itemBuilder 值是一個匿名回調函數, 接受兩個參數- BuildContext和行迭代器i。迭代器從0開始, 每調用一次該函數,i就會自增1,對于每個建議的單詞對都會執行一次。該模型允許建議的單詞對列表在用戶滾動時無限增長。

添加如下高亮的行:

class RandomWordsState extends State<RandomWords> { ... Widget _buildSuggestions() { return new ListView.builder( padding: const EdgeInsets.all(16.0), // 對于每個建議的單詞對都會調用一次itemBuilder,然后將單詞對添加到ListTile行中 // 在偶數行,該函數會為單詞對添加一個ListTile row. // 在奇數行,該行書湖添加一個分割線widget,來分隔相鄰的詞對。 // 注意,在小屏幕上,分割線看起來可能比較吃力。 itemBuilder: (context, i) { // 在每一列之前,添加一個1像素高的分隔線widget if (i.isOdd) return new Divider();// 語法 "i ~/ 2" 表示i除以2,但返回值是整形(向下取整),比如i為:1, 2, 3, 4, 5 // 時,結果為0, 1, 1, 2, 2, 這可以計算出ListView中減去分隔線后的實際單詞對數量 final index = i ~/ 2; // 如果是建議列表中最后一個單詞對 if (index >= _suggestions.length) { // ...接著再生成10個單詞對,然后添加到建議列表 _suggestions.addAll(generateWordPairs().take(10)); } return _buildRow(_suggestions[index]); } ); } }

c. 對于每一個單詞對,_buildSuggestions函數都會調用一次_buildRow。 這個函數在ListTile中顯示每個新詞對,這使您在下一步中可以生成更漂亮的顯示行

在RandomWordsState中添加一個_buildRow函數 :

class RandomWordsState extends State<RandomWords> { ...Widget _buildRow(WordPair pair) { return new ListTile( title: new Text( pair.asPascalCase, style: _biggerFont, ), ); } }

d. 更新RandomWordsState的build方法以使用_buildSuggestions(),而不是直接調用單詞生成庫。 更改后如下面高亮部分:

class RandomWordsState extends State<RandomWords> { ... @override Widget build(BuildContext context) { //final wordPair = new WordPair.random(); // 刪除這兩行 //return new Text(wordPair.asPascalCase); return new Scaffold ( appBar: new AppBar( title: new Text('Startup Name Generator'), ), body: _buildSuggestions(), ); } ... }

e. 更新MyApp的build方法。從MyApp中刪除Scaffold和AppBar實例。 這些將由RandomWordsState管理,這使得用戶在下一步中從一個屏幕導航到另一個屏幕時, 可以更輕松地更改導航欄中的的路由名稱。

用下面高亮部分替換最初的build方法:

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Startup Name Generator', home: new RandomWords(), ); } }

重新啟動應用程序。你應該看到一個單詞對列表。盡可能地向下滾動,您將繼續看到新的單詞對。

image

第5步: 添加交互

在這一步中,您將為每一行添加一個可點擊的心形 ?? 圖標。當用戶點擊列表中的條目,切換其“收藏”狀態時,將該詞對添加到或移除出“收藏夾”。

a. 添加一個 _saved Set(集合) 到RandomWordsState。這個集合存儲用戶喜歡(收藏)的單詞對。 在這里,Set比List更合適,因為Set中不允許重復的值。

class RandomWordsState extends State<RandomWords> { final _suggestions = <WordPair>[];final _saved = new Set<WordPair>();final _biggerFont = const TextStyle(fontSize: 18.0); ... }

b. 在 _buildRow 方法中添加 alreadySaved來檢查確保單詞對還沒有添加到收藏夾中。

Widget _buildRow(WordPair pair) { final alreadySaved = _saved.contains(pair); ... }

c. 同時在 _buildRow()中, 添加一個心形 ?? 圖標到 ListTiles以啟用收藏功能。接下來,你就可以給心形 ?? 圖標添加交互能力了。

添加下面高亮的行:

Widget \_buildRow(WordPair pair) { final alreadySaved = _saved.contains(pair); return new ListTile( title: new Text( pair.asPascalCase, style: _biggerFont, ), trailing: new Icon( alreadySaved ? Icons.favorite : Icons.favorite_border, color: alreadySaved ? Colors.red : null, ), ); }

d. 重新啟動應用。你現在可以在每一行看到心形??圖標?,但它們還沒有交互。

f. 在 _buildRow中讓心形??圖標變得可以點擊。如果單詞條目已經添加到收藏夾中, 再次點擊它將其從收藏夾中刪除。當心形??圖標被點擊時,函數調用setState()通知框架狀態已經改變。

添加如下高亮的行:

Widget \_buildRow(WordPair pair) { final alreadySaved = _saved.contains(pair); return new ListTile( title: new Text( pair.asPascalCase, style: _biggerFont, ), trailing: new Icon( alreadySaved ? Icons.favorite : Icons.favorite_border, color: alreadySaved ? Colors.red : null, ), onTap: () { setState(() { if (alreadySaved) { _saved.remove(pair); } else { _saved.add(pair); } }); }, ); }

提示: 在Flutter的響應式風格的框架中,調用setState() 會為State對象觸發build()方法,從而導致對UI的更新

熱重載你的應用。你就可以點擊任何一行收藏或移除。請注意,點擊一行時會生成從心形 ?? 圖標發出的水波動畫

image

第6步: 導航到新頁面

在這一步中,您將添加一個顯示收藏夾內容的新頁面(在Flutter中稱為路由(route))。您將學習如何在主路由和新路由之間導航(切換頁面)。

在Flutter中,導航器管理應用程序的路由棧。將路由推入(push)到導航器的棧中,將會顯示更新為該路由頁面。 從導航器的棧中彈出(pop)路由,將顯示返回到前一個路由。

a. 在RandomWordsState的build方法中為AppBar添加一個列表圖標。當用戶點擊列表圖標時,包含收藏夾的新路由頁面入棧顯示。

提示: 某些widget屬性需要單個widget(child),而其它一些屬性,如action,需要一組widgets(children),用方括號[]表示。

將該圖標及其相應的操作添加到build方法中:

class RandomWordsState extends State<RandomWords> { ... @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Startup Name Generator'), actions: <Widget>[ new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved), ], ), body: _buildSuggestions(), ); } ... }

b. 向RandomWordsState類添加一個 _pushSaved() 方法.

class RandomWordsState extends State<RandomWords> { ... void _pushSaved() { } }

熱重載應用,列表圖標將會出現在導航欄中。現在點擊它不會有任何反應,因為 _pushSaved 函數還是空的。

c. 當用戶點擊導航欄中的列表圖標時,建立一個路由并將其推入到導航管理器棧中。此操作會切換頁面以顯示新路由。

新頁面的內容在在MaterialPageRoute的builder屬性中構建,builder是一個匿名函數。

添加Navigator.push調用,這會使路由入棧(以后路由入棧均指推入到導航管理器的棧)

void _pushSaved() { Navigator.of(context).push( ); }

d. 添加MaterialPageRoute及其builder。 現在,添加生成ListTile行的代碼。ListTile的divideTiles()方法在每個ListTile之間添加1像素的分割線。 該 divided 變量持有最終的列表項。

void _pushSaved() { Navigator.of(context).push( new MaterialPageRoute( builder: (context) { final tiles = _saved.map( (pair) { return new ListTile( title: new Text( pair.asPascalCase, style: _biggerFont, ), ); }, ); final divided = ListTile .divideTiles( context: context, tiles: tiles, ) .toList(); }, ), ); }

e. builder返回一個Scaffold,其中包含名為“Saved Suggestions”的新路由的應用欄。 新路由的body由包含ListTiles行的ListView組成; 每行之間通過一個分隔線分隔。

添加如下高亮的代碼:

void \_pushSaved() { Navigator.of(context).push( new MaterialPageRoute( builder: (context) { final tiles = _saved.map( (pair) { return new ListTile( title: new Text( pair.asPascalCase, style: _biggerFont, ), ); }, ); final divided = ListTile .divideTiles( context: context, tiles: tiles, ) .toList();return new Scaffold( appBar: new AppBar( title: new Text('Saved Suggestions'), ), body: new ListView(children: divided), ); }, ), ); }

f. 熱重載應用程序。收藏一些選項,并點擊應用欄中的列表圖標,在新路由頁面中顯示收藏的內容。 請注意,導航器會在應用欄中添加一個“返回”按鈕。你不必顯式實現Navigator.pop。點擊后退按鈕返回到主頁路由。

image image

第7步:使用主題更改UI

在這最后一步中,您將會使用主題。主題控制您應用程序的外觀和風格。您可以使用默認主題,該主題取決于物理設備或模擬器,也可以自定義主題以適應您的品牌。

a. 您可以通過配置ThemeData類輕松更改應用程序的主題。 您的應用程序目前使用默認主題,下面將更改primary color顏色為白色。

通過如下高亮部分代碼,將應用程序的主題更改為白色:

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Startup Name Generator', theme: new ThemeData( primaryColor: Colors.white, ), home: new RandomWords(), ); } }

b. 熱重載應用。 請注意,整個背景將會變為白色,包括應用欄。

c. 作為讀者的一個練習,使用 ThemeData 來改變UI的其他方面。 Material library中的 Colors類提供了許多可以使用的顏色常量, 你可以使用熱重載來快速簡單地嘗試、實驗。

image
import 'package:flutter/material.dart'; import 'package:english_words/english_words.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //final wordPair = new WordPair.random(); return new MaterialApp( title: 'Welcome to Flutter', home: new RandomWords(), ); } }class RandomWords extends StatefulWidget { @override createState() => new RandomWordsState(); }class RandomWordsState extends State<RandomWords> { final _suggestions = <WordPair>[]; final _biggerFont = const TextStyle(fontSize: 18.0);final _saved = new Set<WordPair>();@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Startup Name Generator'), actions: <Widget>[ new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved), ], ), body: _buildSuggestions(), ); }void _pushSaved() { Navigator.of(context).push( new MaterialPageRoute( builder: (context) { final tiles = _saved.map( (pair) { return new ListTile( title: new Text( pair.asPascalCase, style: _biggerFont, ), ); }, ); final divided = ListTile .divideTiles( context: context, tiles: tiles, ) .toList();return new Scaffold( appBar: new AppBar( title: new Text('Saved Suggestions'), ), body: new ListView(children: divided), ); }, ), ); }Widget _buildSuggestions() { return new ListView.builder( padding: const EdgeInsets.all(16.0), // 對于每個建議的單詞對都會調用一次itemBuilder,然后將單詞對添加到ListTile行中 // 在偶數行,該函數會為單詞對添加一個ListTile row. // 在奇數行,該行書湖添加一個分割線widget,來分隔相鄰的詞對。 // 注意,在小屏幕上,分割線看起來可能比較吃力。 itemBuilder: (context, i) { // 在每一列之前,添加一個1像素高的分隔線widget if (i.isOdd) return new Divider();// 語法 "i ~/ 2" 表示i除以2,但返回值是整形(向下取整),比如i為:1, 2, 3, 4, 5 // 時,結果為0, 1, 1, 2, 2, 這可以計算出ListView中減去分隔線后的實際單詞對數量 final index = i ~/ 2; // 如果是建議列表中最后一個單詞對 if (index >= _suggestions.length) { // ...接著再生成10個單詞對,然后添加到建議列表 _suggestions.addAll(generateWordPairs().take(10)); } return _buildRow(_suggestions[index]); }); }Widget _buildRow(WordPair pair) { final alreadySaved = _saved.contains(pair);return new ListTile( title: new Text( pair.asPascalCase, style: _biggerFont, ), trailing: new Icon( alreadySaved ? Icons.favorite : Icons.favorite_border, color: alreadySaved ? Colors.red : null, ), onTap: () { setState(() { if (alreadySaved) { _saved.remove(pair); } else { _saved.add(pair); } }); }, ); } }

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得,所有資料僅供用戶學習參考,本站不擁有所有權,如您認為本網頁中由涉嫌抄襲的內容,請及時與我們聯系,并提供相關證據,工作人員會在5工作日內聯系您,一經查實,本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/18045.html
相關APP開發
 八年  行業經驗

多一份參考,總有益處

聯系深圳網站公司塔燈網絡,免費獲得網站建設方案及報價

咨詢相關問題或預約面談,可以通過以下方式與我們聯系

業務熱線:余經理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.    

主站蜘蛛池模板: 影音先锋电影资源av| 在线观看成年人免费视频| 乌克兰10一12x video| 新香蕉少妇视频网站| 亚洲国语在线视频手机在线| 一道精品视频一区二区三区| 中文字幕在线视频免费观看| 99re28久久热在线观看| 大胸美女被C得嗷嗷叫动态图| 快播电影网址| GAY2022空少被体育生暴菊| 无码任你躁久久久久久老妇双奶| 国产免费看黄的私人影院| 《乳色吐息》无删减版在线观看 | 麻豆精选2021| av天堂电影网在线观看| 午夜特级毛片| 热中文热国产热综合| 河南老太XXXXXHD| 国产精品18久久久久久欧美| 最近中文字幕MV高清在线| 色偷偷777| 美女内射少妇三区五区| 99国产精品久久| 日日射日日操| 亚洲视频在线观看地址| AV一区AV久久AV无码| 波多野结衣二区| 97精品在线观看| 国产精品久久人妻无码网站一区L| 精品无码无人网站免费视频| 欧美精品做人一级爱免费| 亚洲AV无码国产精品午夜久久| 2020精品国产视| 国产露脸无码A区久久蘑菇| 美女被强奷到抽搐的动态图| 同房交换4p好爽| 97色伦亚洲自偷| 国语对白刺激真实精品| 女人的选择hd| 夜色帮首页|