Flutter系列01: App Dashboard

這是Flutter Thursday系列的首篇文章。我們會(huì)在今后每周從互聯(lián)網(wǎng)上尋找一些APP設(shè)計(jì)轉(zhuǎn)換成Flutter UI票从。
假設(shè)讀者已經(jīng)了解Dart(Flutter應(yīng)用開發(fā)語言)并設(shè)置了編譯環(huán)境跳仿,所以不會(huì)再介紹Dart及Flutter的安裝步聚留美,只會(huì)解釋一些概念和相關(guān)問題贸呢。接下來我們將做一個(gè)簡(jiǎn)單的任務(wù):一個(gè)移動(dòng)APP的dashboard,如下圖:


image.png

開啟終端并創(chuàng)建一個(gè)新應(yīng)用:

flutter create dashboard
cd dashboard

Flutter會(huì)自動(dòng)生成一個(gè)有良好注釋的主文件放在lib目錄下(lib/main.dart)瓷叫。刪掉主程序文件內(nèi)容并創(chuàng)建dashboard.dart在同目錄下屯吊。增加main.dart內(nèi)容如下:

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Dashboard(),
    );
  }
}

MyApp是應(yīng)用根類。runApp()方法加載(inflates)MyApp組件并展示到屏幕摹菠。Flutter支持material設(shè)計(jì)盒卸,需要調(diào)用MaterialApp類。
Home定義了默認(rèn)路由次氨,本例中為:Dashboard()蔽介。
dashboard.dart文件內(nèi)容如下:

import 'package:flutter/material.dart';

class Dashboard extends StatefulWidget {
  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Awesome Dashboard is coming!"),
      ),
    );
  }
}

接著對(duì)AppBar提升至0.1,改變標(biāo)題文本及背景色:

appBar: AppBar(
        title: Text("INDHOLD"),
        elevation: .1,
        backgroundColor: Color.fromRGBO(49, 87, 110, 1.0),
),

接著編寫一個(gè)grid顯示dashboard項(xiàng)煮寡。增加body組件屉佳,設(shè)置為Container,設(shè)置padding并加入GridView.count做為子組件洲押。代碼如下:

      body: Container(
        padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 8.0),
        child: GridView.count(
          crossAxisCount: 2,
          padding: EdgeInsets.all(3.0),
          children: <Widget>[],
        ),
      ),

設(shè)置container外間距橫縱分別為20像素和8像素。使用crossAxisCount:2定義兩列g(shù)rid圆凰,GridView子組件為children——children:<Widget>[]杈帐。接下來創(chuàng)建一個(gè)函數(shù)返回Card組件的自定義項(xiàng),命名為makeDashboardItem(String title,IconData icon),名含title和icon兩個(gè)參數(shù)挑童,這會(huì)展示在dashboard的項(xiàng)目中

Card makeDashboardItem(String title, IconData icon) {
    return Card(
        elevation: 1.0,
        margin: new EdgeInsets.all(8.0),
        child: Container(
    
        ));
  }

Card設(shè)置elevation和margins累铅,并增加Container的子組件,以下為Card組件內(nèi)容:

Card makeDashboardItem(String title, IconData icon) {
    return Card(
        elevation: 1.0,
        margin: new EdgeInsets.all(8.0),
        child: Container(
          decoration: BoxDecoration(color: Color.fromRGBO(220, 220, 220, 1.0)),
          child: new InkWell(
            onTap: () {},
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
              verticalDirection: VerticalDirection.down,
              children: <Widget>[
                SizedBox(height: 50.0),
                Center(
                    child: Icon(
                  icon,
                  size: 40.0,
                  color: Colors.black,
                )),
                SizedBox(height: 20.0),
                new Center(
                  child: new Text(title,
                      style:
                          new TextStyle(fontSize: 18.0, color: Colors.black)),
                )
              ],
            ),
          ),
        ));
  }

在container容器中站叼,使用BoxDecoration(color:Color.fromRGBO(220,200,200,1.0))設(shè)置顏色娃兽。container容器需要一個(gè)子組件,在這里使用InkWell組件尽楔,這樣可以對(duì)每一個(gè)項(xiàng)目進(jìn)行觸控事件響應(yīng)投储。在InkWell組件中定義子組件Column,顯示children:兩個(gè)包含圖標(biāo)和文本Center組件阔馋;兩個(gè)SizedBox對(duì)其進(jìn)行垂直分割玛荞。
使用makeDashboardItem函數(shù)填充GridView.count的子組件列表

      body: Container(
        padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 2.0),
        child: GridView.count(
          crossAxisCount: 2,
          padding: EdgeInsets.all(3.0),
          children: <Widget>[
            makeDashboardItem("Ordbog", Icons.book),
            makeDashboardItem("Alphabet", Icons.alarm),
            makeDashboardItem("Alphabet", Icons.alarm),
            makeDashboardItem("Alphabet", Icons.alarm),
            makeDashboardItem("Alphabet", Icons.alarm),
            makeDashboardItem("Alphabet", Icons.alarm)
          ],
        ),
      ),

運(yùn)行app顯示以下內(nèi)容:


image.png

原文地址(需翻墻)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市呕寝,隨后出現(xiàn)的幾起案子勋眯,更是在濱河造成了極大的恐慌,老刑警劉巖下梢,帶你破解...
    沈念sama閱讀 210,914評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件客蹋,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡孽江,警方通過查閱死者的電腦和手機(jī)讶坯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評(píng)論 2 383
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來竟坛,“玉大人闽巩,你說我怎么就攤上這事〉L溃” “怎么了涎跨?”我有些...
    開封第一講書人閱讀 156,531評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)崭歧。 經(jīng)常有香客問我隅很,道長(zhǎng),這世上最難降的妖魔是什么率碾? 我笑而不...
    開封第一講書人閱讀 56,309評(píng)論 1 282
  • 正文 為了忘掉前任叔营,我火速辦了婚禮,結(jié)果婚禮上所宰,老公的妹妹穿的比我還像新娘绒尊。我一直安慰自己,他們只是感情好仔粥,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評(píng)論 5 384
  • 文/花漫 我一把揭開白布婴谱。 她就那樣靜靜地躺著蟹但,像睡著了一般。 火紅的嫁衣襯著肌膚如雪谭羔。 梳的紋絲不亂的頭發(fā)上华糖,一...
    開封第一講書人閱讀 49,730評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音瘟裸,去河邊找鬼客叉。 笑死,一個(gè)胖子當(dāng)著我的面吹牛话告,可吹牛的內(nèi)容都是我干的兼搏。 我是一名探鬼主播,決...
    沈念sama閱讀 38,882評(píng)論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼超棺,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼向族!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起棠绘,我...
    開封第一講書人閱讀 37,643評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤件相,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后氧苍,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體夜矗,經(jīng)...
    沈念sama閱讀 44,095評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評(píng)論 2 325
  • 正文 我和宋清朗相戀三年让虐,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了紊撕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,566評(píng)論 1 339
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡赡突,死狀恐怖对扶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情惭缰,我是刑警寧澤浪南,帶...
    沈念sama閱讀 34,253評(píng)論 4 328
  • 正文 年R本政府宣布,位于F島的核電站漱受,受9級(jí)特大地震影響络凿,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜昂羡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評(píng)論 3 312
  • 文/蒙蒙 一絮记、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧虐先,春花似錦怨愤、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽膀息。三九已至,卻和暖如春了赵,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背甸赃。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工柿汛, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人埠对。 一個(gè)月前我還...
    沈念sama閱讀 46,248評(píng)論 2 360
  • 正文 我出身青樓络断,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親项玛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子貌笨,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評(píng)論 2 348