Flutter官網例子學習教程 Material 組件 APP介紹

2021-01-07 勤與奮

本頭條核心宗旨

歡迎來到「技術剛剛好」作者,「技術剛剛好」是個人維護,每天至少更新一篇Flutter技術文章,實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術,那就跟我一起學習進步吧,你的贊,收藏,轉發是對我個人最大的支持,維護不易,歡迎關注。

技術剛剛好經歷

近幾年,移動端跨平臺開發技術層出不窮,從Facebook家的ReactNative,到阿里家WEEX,前端技術在移動端跨平臺開發中大展身手,技術剛剛好作為一名Android開發,經歷了從Reactjs到Vuejs的不斷學習。而在2018年,我們的主角變成了Flutter,這是Goolge開源的一個移動端跨平臺解決方案,可以快速開發精美的移動App。希望跟大家一起學習,一起進步!

本文核心要點

我們還需要了解 Material Components,也就是 Material 組件。它提供了實現 Material Design 準則的視覺、行為和動作的 Widget。官方將 Material 組件分為為幾個類型:

應用程式結構和導航Button輸入和選擇對話框,警告彈框和面板信息顯示布局主要介紹應用程式結構和導航,會分為兩篇文章進行介紹,這一篇介紹應用程式結構和導航分類中的 MaterialApp、Scaffold、AppBar。

1.MaterialApp

說到 Material 組件,不得不提到 MaterialApp,它包含了許多 Widget,這些 Widget 通常是實現 Material Design 的應用程式所必需的。MaterialApp 在此前的文章都用過,簡單的使用這裡就不介紹了,這裡主要介紹下路由。移動 App 中通常通過全屏元素 「屏幕」 或 「頁面」 來顯示內容。在 Flutter 中,這些元素被稱為 route(路由),它們由 Navigator 管理。Navigator 不僅管理了一堆 route,還提供管理堆棧的方法 Navigator.push 和 Navigator.pop,通過路由對象的進出棧來控制頁面的跳轉。

flutter 路由的使用方式主要有兩種,一種是新建路由,一種是註冊路由。我們分別用這兩種方式寫例子:首屏是第一個界面,通過第一個界面的按鈕跳轉到第二頁,點擊第二頁的按鈕回到第一頁。

1.1 新建路由

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Material Components', home: FirstPage(), ); }}class FirstPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('第一頁'), ), body: Padding( padding: EdgeInsets.all(30.0), child: RaisedButton( child: Text('跳轉到第二頁'), onPressed: () { Navigator.push(//1 context, MaterialPageRoute(builder: (context) => SecondPage()), ); }, ), ), ); }}class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('第二頁'), ), body: Padding( padding: EdgeInsets.all(30.0), child: RaisedButton( child: Text('回到上一頁'), onPressed: () { Navigator.pop(context);//2 }), ), ); }}一個簡單的flutter結構

import 'package:flutter/material.dart';void main() { runApp(MaterialApp( // Title title: "Simple Material App", // Home home: Scaffold( // Appbar appBar: AppBar( // Title title: Text("Simple Material App"), ), // Body body: Container( // Center the content child: Center( // Add Text child: Text("Hello World!"), ), ), )));}總結

這個結構就是一個基本的Flutter項目結構,有部分人問我Flutter項目結構問題。

謝謝觀看技術剛剛好的文章,技術剛剛好是個人維護,每天至少更新一篇Flutter技術文章,實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術,那就跟我一起學習進步吧,你的贊,收藏,轉發是對我個人最大的支持,維護不易,歡迎關注。

相關焦點

  • 精講Flutter官網的第一個例子
    更多優質免費教程:http://tryenough.com/type-flutter原文連結:https://tryenough.com/flutter04前言學習Flutter你一定會看到官網的第一個例子:中文版 或 英文版。但是作為新手,或許你看的會很費勁,這篇文章的目的是幫助你更好的理解這個例子。
  • 為大家學習Flutter,阿里操碎了心
    可以說真的為大家學習Flutter操碎了心:https://github.com/alibaba/flutter-go打開app的介紹:由「阿里拍賣」前端團隊幾位Flutter粉絲,用業餘時間開發的一款,用於Flutter教學幫助的App,這裡沒有高大尚的概念,只有一個一個親身經歷的嘗試,用最直觀的方式展示Flutter官方Demo
  • Flutter 實戰11
    顧名思義,所謂組件測試就是用來測試單個組件的,即用來確保某個組件按預期的方式運行。下面分步驟來介紹組件測試如何進行。import 'package:flutter/material.dart';import 'package:flutter_test/flutter_test.dart';import 'package:flutter_app2/main.dart';void main() { testWidgets('Counter increments
  • Flutter教程從零構建電商應用(一)
    在這個系列中,我們將學習如何使用google的移動開發框架flutter創建一個電商應用。本文是flutter框架系列教程的第一部分,將學習如何安裝Flutter開發環境並創建第一個Flutter應用,並學習Flutter應用開發中的核心概念,例如widget、狀態等。
  • flutter零基礎入門(1+1)Image組件和icon組件
    width: double.infinity,height: double.infinity),3.5.1 圖片Flutter中,我們可以通過Image組件來加載並顯示圖片width、height:用於設置圖片的寬、高,當不指定寬高時,圖片會根據當前父容器的限制,儘可能的顯示其原始大小,如果只設置width、height的其中一個,那麼另一個屬性默認會按比例縮放,但可以通過下面介紹的
  • 「首席架構師推薦」棒棒的Flutter庫,工具,教程,文章列表(1)
    Flutter by Example - 基於Redux,Firebase,自定義動畫和UI的教程。Flutter Institute - Brian Armstrong的非常原創的內容和教程。Iirokrankka.com - 文章和教程以及Iiro Krankka相關的任何內容。Norbert - Norbert515的深度文章,功能和應用程式創建。
  • Flutter 實戰4
    語言的學習先HelloWorld每個 app 都有一個 main() 函數。
  • Flutter加載網頁之官方webview_flutter講解
    前言最近在用flutter開發一個App,其中需要加載網頁,本來以為很簡單的一件事,卻遇到了不少坑,最後整整搞了一上午。對於加載網頁這個功能來說,flutter並沒有組件,反而是第三方開發了一些組件,目前比較常用的有二種: flutter_webview_plugin webview_flutterflutter_webview_plugin是目前用得最火的一種,也是比較好用的,但是它有個致命的缺點,它不支持「進入某個URL之前攔截」,這也是我放棄它的原因。
  • Flutter Go首頁、文檔和下載 - Flutter 學習 App - OSCHINA
    flutter優點主要包括: 跨平臺 開源 Hot Reload、響應式框架、及其豐富的控制項以及開發工具 靈活的界面設計以及控制項組合 藉助可以移植的GPU加速的渲染引擎以及高性能ARM代碼運行時已達到高質量的用戶體驗Flutter Go 的由來 Flutter學習資料太少,對於英文不好的同學相對來說比較困難 官網文檔示例不夠健全,不夠直觀 各個 widget 的用法各異,屬性紛繁
  • <譯>解密Flutter響應式布局
    這是譯者的代碼import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';/// Copyright (C), 2020-2020, flutter_demo/// FileName: orientationBuilder_demo//
  • 動畫實用教程 | 在屏幕上添加一個 Drawer
    它同樣支持一些特殊的 Material Design 組件,例如 Drawer,AppBar 和 SnackBar 等。在這個例子中,我們想要創建一個帶有 drawer 的 Scaffold:2. 添加一個 drawer我們現在可以在 Scaffold 上添加一個 drawer。
  • Flutter 中文文檔:點擊、拖拽事件和文本輸入
    常見的交互有用戶點擊按鈕、在屏幕上拖動組件和在 TextField 中輸入文本。為了測試這些交互,我們需要在測試環境中模擬上述場景,可以藉助 flutter_test 庫中的 WidgetTester 類來實現。WidgetTester 提供了文本輸入、點擊、拖動的相關方法:在很多情況下,用戶交互會更新應用狀態。
  • 實操|在 Flutter 中創建通信橋
    這意味著,在 Kotlin 或 Swift 中的本地應用程式中你可以實例化一個 WebView 組件,而在 Flutter 中你不能直接將 WebView 組件添加到你的應用程式中。在創建一個新的 Flutter 項目後,我們需要使用webview_flutter包來使得能夠使用 WebView。
  • Flutter自定義Stateful(有狀態)組件
    Flutter如何自定義一個Stateful(有狀態)組件你將學到:什麼是stateful 組件如何創建一個stateful 組件自定義有狀態組件的實例實例的樣子:什麼是stateful widgetstateful widget 是指有狀態變化的組件,例如系統提供的 Checkbox, Radio,
  • Flutter widget點擊事件和點擊態
    更多教程:http://tryenough.com/flutter06你將學到1.使用Flutter自定義控制項,點擊態處理2.Flutter 添加點擊手勢3.Flutter 多狀態管理4.一個具體的例子先看下效果效果圖分析:– 點擊不放開的時候
  • Mac版最詳細的Flutter開發環境搭建
    上周任務不多,閒來無事想學習一下flutt
  • 谷歌Flutter 1.7正式發布:支持AndroidX和Android App Bundles
    Flutter 1.7 包含了對 AndroidX 的支持,滿足了 Play 商店近期對應用提出的要求,包含了一些新的和增強過的組件,修復了開發者們提出的 bug 等。支持 AndroidXAndroidX 是 Android 團隊用於在 Jetpack 中開發、測試、打包和發布庫以及對其進行版本控制的開源項目,幫助 Android 應用通過最新的組件保持更新而無需犧牲向後兼容性
  • ng-material 0.0.3 發布,Angular material2 的拓展組件
    此組件旨在拓展 material 2 的組件,滿足更多前後端的業務需求,當然你可以根據CDK 進行各種自定義。
  • Flutter 中文文檔:Widget 測試介紹
    在 Flutter 中文文檔:單元測試介紹 部分,我們學習了使用 test 這個 package 測試 Dart 類的方法。
  • 學習Flutter遇到的問題以及解決方案
    這裡補充的是如果使用了Expanded,那麼其中的Widget的尺寸就不再起作用2:StatefulWidget組件:執行了setState子組件也會更新3:A組件包含B組件,B組件在使用setState報錯4:重新setState父組件重新執行Widget build(BuildContext context)方法不會重新new一個對象解釋: