一、哪些大廠在使用Flutter開發(fā)app
在軟件開發(fā)領域，F(xiàn)lutter因其跨平臺開發(fā)及高效性能的特點，受到眾多大廠的青睞。這些大廠運用Flutter技術，不僅提升了應用開發(fā)速度，還增強了產(chǎn)品的性能和用戶體驗。下面列出了部分使用Flutter開發(fā)app的大廠。
騰訊
騰訊利用Flutter開發(fā)了微信小程序、QQ音樂等多個應用。通過Flutter的跨平臺特性，騰訊有效提升了開發(fā)效率與用戶體驗。
阿里巴巴
阿里巴巴集團在內(nèi)部大力使用Flutter技術，為旗下淘寶、支付寶等應用提供了強大的技術支持。這充分展現(xiàn)了阿里巴巴在電商、金融領域的創(chuàng)新力。
谷歌
谷歌不僅是Flutter的倡導者，還積極使用Flutter開發(fā)自家應用，并大力推廣其在開發(fā)者社區(qū)的使用，為技術生態(tài)的發(fā)展貢獻力量。
除此之外，字節(jié)跳動、貝恩資本、IBM、微軟和PayPal等大廠也在使用Flutter進行應用開發(fā)。字節(jié)跳動開發(fā)了抖音、今日頭條等應用；貝恩資本在金融投資領域引入Flutter，構建了靈活、安全的金融應用；IBM和微軟則在企業(yè)級應用中利用Flutter的跨平臺優(yōu)勢，為客戶提供便捷、統(tǒng)一的解決方案。這些實例展示了Flutter廣泛的應用范圍和強大的技術實力。
二、跨平臺開發(fā)方案：uniapp、flutter、react-native淺析
隨著移動開發(fā)的不斷發(fā)展，跨平臺解決方案逐漸成為開發(fā)者關注的焦點。uniapp、flutter和react-native是市面上常見的三種跨平臺開發(fā)方案。
跨平臺開發(fā)方案比較
uniapp：基于vue技術，旨在簡化開發(fā)，尤其適合快速原型和小程序開發(fā)。但其在底層API支持、渲染效率和復雜場景支持方面可能不如flutter和react-native。
flutter：由google開發(fā)，使用dart語言。其最大優(yōu)點是直接使用GPU渲染，提供原生般的性能，無需js橋接。但dart的學習曲線較陡峭，且熱更新時可能存在額外性能損耗。
react-native：以react語法為主，由facebook支持。其在復雜場景和工程靈活性上表現(xiàn)優(yōu)秀，但通信開銷較大且依賴于特定IDE。
從移動端生態(tài)角度看，原生開發(fā)始終是最優(yōu)選擇。其次是flutter，其性能接近原生，然后是react-native。uniapp則更適合快速原型和小程序開發(fā)，但在復雜場景下的性能相對較弱。在學習成本上，原生開發(fā)最高，flutter和react-native相近，而uniapp最低。但在渲染效率上，原生最佳，其次是flutter，然后是react-native。
各種跨平臺開發(fā)方案都有其特點和優(yōu)勢，開發(fā)者可以根據(jù)項目需求和團隊技術背景選擇合適的方案。 重走Flutter狀態(tài)管理之路——Riverpod入門篇
一、前言
熟悉我的朋友都知道，多年前我曾著手寫過“Flutter狀態(tài)管理之路”系列文章。當時，我所介紹的是Provider，這是Flutter官方推薦的狀態(tài)管理工具。但遺憾的是，寫著寫著，我發(fā)現(xiàn)其存在一些不盡如人意的地方，使用起來也不太順暢，因此這個系列暫時擱置了。
時光荏苒，雖然Flutter內(nèi)部尚未出現(xiàn)一個能碾壓所有狀態(tài)管理框架的方案，如GetX等可能是一些人的選擇，但我始終覺得InheritedWidget系的狀態(tài)管理才是正統(tǒng)。
最近，在關注Provider的后續(xù)進展時，我意外發(fā)現(xiàn)了一個新庫——Riverpod。正如其名所示，這是一個新一代的狀態(tài)管理工具。更令人驚訝的是，它的作者正是Provider的創(chuàng)作者。
二、為什么選擇Riverpod
三、什么是Riverpod？
官方文檔對于初學者來說可能有些難以理解。實際上，Riverpod和Provider一樣，提供了多種類型的Provider，分別用于不同的場景。理清這些Provider的不同作用和使用場景對于使用Riverpod至關重要。本系列文章的目的就是帶領大家深入理解并應用Riverpod。
四、Provider與狀態(tài)管理
我們?yōu)槭裁匆M行狀態(tài)管理？狀態(tài)管理是為了解決聲明式UI開發(fā)中數(shù)據(jù)狀態(tài)的處理問題。例如，當Widget A依賴于同級的Widget B的數(shù)據(jù)時，我們需要將狀態(tài)提升到它們的父類處理。這種場景下，就需要用到狀態(tài)管理框架如Riverpod和Provider來解決這個問題。通過狀態(tài)管理，我們可以獲得以下好處：
允許在多個位置輕松訪問該狀態(tài)。例如將某個state包裹在一個Provider中可以使其他組件輕松訪問這個狀態(tài)。這完全替代了Singletons、Service Locators等模式。
簡化了與其他狀態(tài)的結(jié)合問題。遇到如何合并多個對象的問題時，可以在Provider內(nèi)部直接實現(xiàn)解決。這對于處理復雜的狀態(tài)邏輯非常有幫助。
性能優(yōu)化也是一大優(yōu)勢。無論是過濾Widget的重建還是緩存昂貴的狀態(tài)計算，Provider都能確保只有受狀態(tài)變化影響的部分才被重新計算，從而提高性能。同時增加應用程序的可測試性也是其一大特點。使用Provider進行測試時不需要復雜的setUp/tearDown步驟等特性也提高了開發(fā)的效率和質(zhì)量。此外它還允許與高級功能如logging或pull-to-refresh等輕松集成進一步提升應用的功能性和用戶體驗。下面我們就通過一個簡單的例子來感受下Riverpod是如何進行狀態(tài)管理的吧！我們可以嘗試一些基本的示例來更好地理解這個概念以及它在實際應用中的表現(xiàn)并了解如何開始使用它來幫助我們更好地管理應用程序的狀態(tài)以提高開發(fā)效率和應用程序質(zhì)量從而為我們的用戶提供更好的體驗。Riverpod中的Provider角色解析
一、Provider概述
在Riverpod應用程序中，Provider無疑是最為關鍵的部分。Provider作為一個對象，不僅封裝了state，還允許我們監(jiān)聽這個state的變化。雖然Provider存在多種變體形式，但它們的核心工作方式是一致的。
二、Provider的常見用法
最常見的使用方式是將Provider聲明為全局常量。例如：
```dart
final myProvider = Provider((ref) { return MyValue(); });
```
請不要被Provider的全局變量屬性所嚇倒。這里的Provider是完全final的，意味著其值一旦被設定就不會再改變。從某種程度上說，聲明一個Provider與聲明一個函數(shù)是相似的，而且Provider是可測試、易于維護的。
三、Provider的組成部分
上述代碼主要由三部分構成。
1. `final myProvider`：這是一個變量聲明，我們將通過它來讀取Provider的狀態(tài)。值得注意的是，Provider應該總是被聲明為final。
2. `Provider`：這是我們選擇的Provider類型。Provider是所有Provider類型中最基本的，它暴露了一個不會改變的對象。我們可以選擇使用其他的Provider類型，如StreamProvider或StateNotifierProvider，以改變值的交互方式。
3. 創(chuàng)建共享狀態(tài)的函數(shù)：這個函數(shù)總是接收一個名為ref的對象作為參數(shù)。這個ref對象允許我們讀取其他Provider，執(zhí)行一些在我們Provider狀態(tài)將被銷毀時的操作等。
四、多Provider的聲明與使用
與package:provider不同，Riverpod允許我們創(chuàng)建多個暴露相同"類型"的狀態(tài)的provider。例如：
```dart
final cityProvider = Provider((ref) => 'London');
final countryProvider = Provider((ref) => 'England');
```
雖然這兩個Provider都創(chuàng)建了一個字符串，但這并沒有任何問題。
五、Provider的作用及實施
為了能使Provider發(fā)揮作用，我們需要在Flutter應用程序的根部添加ProviderScope。例如：
```dart
void main() { runApp(ProviderScope(child: MyApp())); }
```
以上就是Riverpod最簡單的使用方式。接下來，我們將通過完整的示例代碼來進一步展示其功能和優(yōu)勢。通過理解這些代碼，您將更深入地掌握如何在Riverpod應用程序中有效地使用Provider。使用Riverpod管理Flutter應用狀態(tài)：從入門到精通
一、引言
在Flutter開發(fā)中，狀態(tài)管理是應用構建的關鍵環(huán)節(jié)之一。Riverpod作為一種輕量級、高效的狀態(tài)管理解決方案，受到了廣大開發(fā)者的歡迎。本文將帶你深入了解如何使用Riverpod來管理Flutter應用的狀態(tài)。
二、Riverpod基礎：聲明全局變量
一、聲明Provider
在Riverpod中，我們可以通過聲明一個Provider來創(chuàng)建一個全局變量，用于管理應用的狀態(tài)數(shù)據(jù)。例如，我們可以創(chuàng)建一個名為“helloWorldProvider”的Provider，其值初始化為“Hello world”。
二、使用ProviderScope包裹應用
為了使得應用中的Widget能夠讀取Provider中的值，我們需要使用ProviderScope包裹整個應用。在這個范圍內(nèi)，我們可以訪問并管理Provider的狀態(tài)。
三、如何讀取Provider的狀態(tài)值
一、使用ref變量
在Riverpod中，我們不需要依賴BuildContext來讀取Provider的狀態(tài)，而是使用一個名為“ref”的變量。這個變量是聯(lián)系存取雙方的紐帶，允許我們與Provider進行互動。
四、從Provider中獲取ref
一、傳遞ref參數(shù)
所有Provider都有一個“ref”參數(shù)。我們可以將這個參數(shù)安全地傳遞給其他Provider或者類，以便獲取所需要的值。例如，我們可以將一個Provider的“ref”傳遞給一個StateNotifier。
五、應用實例：Counter類使用ref讀取Provider
一、創(chuàng)建counterProvider
我們創(chuàng)建一個名為“counterProvider”的StateNotifierProvider，該Provider能夠讀取其他Provider的值。
二、實現(xiàn)Counter類
Counter類繼承自StateNotifier，通過讀取“ref”參數(shù)來訪問其他Provider。例如，我們可以在Counter類中讀取名為“repositoryProvider”的Provider，并使用其值來執(zhí)行某些操作。
六、總結(jié)與感悟
通過本文的學習，我們可以發(fā)現(xiàn)，使用Riverpod管理Flutter應用狀態(tài)非常簡單。我們只需要聲明一個全局變量來管理狀態(tài)數(shù)據(jù)，然后在任意地方通過ref變量獲取數(shù)據(jù)即可。Riverpod提供了便捷的狀態(tài)管理解決方案，使得我們在開發(fā)Flutter應用時能夠更加高效、輕松地管理狀態(tài)。
Riverpod是一種強大而易于使用的狀態(tài)管理解決方案，適用于各種規(guī)模的Flutter項目。通過學習和掌握Riverpod，我們將能夠更好地管理應用狀態(tài)，提高開發(fā)效率和代碼質(zhì)量。Riverpod中的ref：連接組件與Provider的橋梁
一、從Widget中獲取ref
在Riverpod框架中，當我們談論Widgets時，通常不會直接涉及到ref參數(shù)。但為了滿足特定的需求，Riverpod為我們提供了多種策略來間接地從widget中獲取這個重要的參數(shù)。
二、擴展ConsumerWidget
在widget樹中，若想獲得一個ref，一個常見的方法是使用ConsumerWidget替代StatelessWidget。ConsumerWidget的使用方式與StatelessWidget非常相似，但其構建方法上有一個特殊的區(qū)別：它擁有一個"ref"對象。例如：
```dart
class HomeView extends ConsumerWidget {
const HomeView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
// 使用ref監(jiān)聽Provider
final counter = ref.watch(counterProvider);
return Text('${counter}');
}
}
```
三. 擴展ConsumerStatefulWidget與ConsumerState
類似于ConsumerWidget，ConsumerStatefulWidget和ConsumerState的組合為我們提供了一個帶有狀態(tài)的StatefulWidget結(jié)構。在這個結(jié)構中，"ref"不是作為構建方法的參數(shù)傳遞，而是作為ConsumerState對象的一個屬性。例如：
```dart
class HomeView extends ConsumerStatefulWidget {
const HomeView({Key? key}) : super(key: key);
@override
HomeViewState createState() => HomeViewState();
}
class HomeViewState extends ConsumerState
@override
void initState() {
super.initState();
// "ref"可以在StatefulWidget的所有生命周期中使用。
ref.read(counterProvider);
}
@override
Widget build(BuildContext context) {
// 我們也可以在構建方法中，使用"ref"來監(jiān)聽一個Provider。
final counter = ref.watch(counterProvider);
return Text('${counter}');
}
}
```
四、通過ref獲取狀態(tài)
一旦我們獲得了"ref"，就可以開始使用它來執(zhí)行各種操作。ref主要有三個用途：
1. 獲取并監(jiān)聽Provider的值：當該值發(fā)生變化時，使用ref.watch可以重建訂閱該值的Widget或觸發(fā)相關的操作。這是最常見和推薦的使用方式。
2. 在Provider上添加監(jiān)聽器：例如，當需要執(zhí)行某些操作（如導航到新的頁面）或在Provider的值發(fā)生變化時執(zhí)行某些操作時，可以使用ref.listen。但它通常不如ref.watch常用，因為它更偏向于命令式編程風格。
3. 獲取Provider的值但不監(jiān)聽變化：在某些場景下，如點擊等，我們可能只需要一個瞬間的Provider值而不關心其變化。這時可以使用ref.read。但值得注意的是，為了保持應用的響應性和聲明性風格，應盡可能使用ref.watch。這樣可以使應用更容易維護和調(diào)試?？傮w來說，依賴ref.watch可以使你的應用既反應式又聲明式，從而更加穩(wěn)定和高效。使用ref.watch觀察Provider狀態(tài)的變化
章節(jié)一：引言
在Flutter開發(fā)中，Provider是一種管理應用狀態(tài)的工具。而ref.watch則是觀察這些狀態(tài)變化的關鍵方法。本文將深入探討如何使用ref.watch來觀察Provider的狀態(tài)。
章節(jié)二：基礎概念
我們需要理解Provider和ref.watch的基本概念。Provider用于封裝和管理應用的狀態(tài)，而ref.watch則用于在Widget或Provider中監(jiān)聽另一個Provider的狀態(tài)變化。這樣，當狀態(tài)發(fā)生變化時，相關的Widget能夠自動更新。
章節(jié)三：實例應用 - 合并多個Provider
以處理一個todo-list的過濾為例，我們需要兩個Provider：filterTypeProvider和todosProvider。前者用于存儲當前的過濾器類型，后者用于存儲整個任務列表。通過ref.watch和這兩個Provider，我們可以創(chuàng)建一個新的Provider——filteredTodoListProvider，它結(jié)合這兩個Provider來創(chuàng)建一個過濾后的任務列表。這樣，當過濾器類型或任務列表發(fā)生變化時，過濾后的列表也會自動更新。
代碼示例：
```dart
final filterTypeProvider = StateProvider
final todosProvider = StateNotifierProvider
(ref) => TodoList(),
);
final filteredTodoListProvider = Provider((ref) {
final FilterType filter = ref.watch(filterTypeProvider);
final List
switch (filter) {
case FilterType.completed:
return todos.where((todo) => todo.isCompleted).toList();
case FilterType.none:
return todos;
}
});
```
章節(jié)四：Widget與Provider的交互
除了使用ref.watch來觀察Provider的狀態(tài)，我們還可以在一個Widget中使用它來顯示來自Provider的內(nèi)容。當該內(nèi)容發(fā)生變化時，它會更新用戶界面。例如，我們可以創(chuàng)建一個顯示計數(shù)的Widget，該計數(shù)存儲在counterProvider中。當計數(shù)發(fā)生變化時，該Widget將重建，并顯示新的值。
代碼示例：
```dart
final counterProvider = StateProvider((ref) => 0);
class HomeView extends ConsumerWidget {
const HomeView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final counter = ref.watch(counterProvider);
return Text('$counter');
}
}
```
章節(jié)五：注意事項與使用建議
一、通過ref.listen監(jiān)聽Provider的變化
在Flutter開發(fā)中，ref.listen是一種強大的機制，用于監(jiān)聽Provider的狀態(tài)變化。與ref.watch相似，但有所不同。當被監(jiān)聽的Provider狀態(tài)發(fā)生變化時，ref.listen不會重建widget/provider，而是觸發(fā)一個自定義函數(shù)。這使得它在執(zhí)行某些操作時非常有用，比如在狀態(tài)變化時顯示一個snackbar來通知用戶。
使用ref.listen時需要提供兩個參數(shù)：第一個是你要監(jiān)聽的Provider，第二個是當狀態(tài)改變時需要執(zhí)行的回調(diào)函數(shù)。這個回調(diào)函數(shù)會接收到兩個值——之前的狀態(tài)值和新的狀態(tài)值。這樣你就可以根據(jù)這些值來執(zhí)行相應的操作。
值得注意的是，ref.listen可以在Provider的體內(nèi)使用，也可以在Widget的Build方法中使用。應避免在異步函數(shù)，如ElevatedButton的onPressed中，以及initState和其他State的生命周期內(nèi)使用它。
二、通過ref.read讀取Provider的狀態(tài)
除了監(jiān)聽Provider的變化，我們還可以通過ref.read方法來讀取Provider的狀態(tài)。這是一種在不監(jiān)聽的情況下獲取Provider狀態(tài)的方法，通常用于由用戶交互觸發(fā)的函數(shù)中。例如，在用戶點擊按鈕時，我們可以使用ref.read來增加計數(shù)器的值。
盡管ref.read在某些情況下可能看起來很有用，但應盡量避免使用。因為它不是響應式的，如果在需要響應式更新的情況下使用ref.read，可能會導致問題。在大多數(shù)情況下，使用ref.watch或ref.listen是更好的選擇，尤其是ref.watch。
三、何時使用ref.read？
那么，何時應該使用ref.read呢？絕對不要在Widget的build函數(shù)中使用ref.read。盡管使用ref.read可能有助于優(yōu)化Widget的性能，但這種做法可能導致難以追蹤的錯誤。
在某些情況下，你可能會認為Provider的值永遠不會改變，因此使用ref.read是安全的。這種假設是不穩(wěn)定的。在軟件開發(fā)中，特別是隨著項目的演進和變化，之前不會改變的值很可能在未來需要改變。
如果你使用ref.read，當這個值需要改變時，你將面臨一個巨大的問題：你需要在整個代碼庫中查找并替換所有的ref.read為ref.watch或ref.listen。這不僅容易出錯，而且很容易忘記某些情況。從一開始就使用ref.watch或ref.listen是更好的選擇，以減少未來的問題和重構的需要。
四、總結(jié)
第一章：引言
你是否想過通過ref.read來減少widget的重構次數(shù)，以提升應用的性能？這是一個值得探索的問題。在Flutter開發(fā)中，優(yōu)化性能、提升用戶體驗始終是開發(fā)者追求的目標。接下來，我們將探討如何通過ref.watch來實現(xiàn)這一目標。
第二章：理解ref.watch的價值
ref.watch是一個強大的工具，可以幫助我們減少不必要的widget構建。在Flutter開發(fā)中，當某些數(shù)據(jù)發(fā)生變化時，相關的widget會重新構建，這可能導致性能下降。使用ref.watch可以讓我們更精確地控制widget的構建過程，減少不必要的重建。
第三章：理解Provider的作用
Provider是Flutter中用于管理狀態(tài)的重要工具。它提供了各種方法來獲取值，并幫助我們減少widget的重建次數(shù)。通過Provider，我們可以更方便地管理應用的狀態(tài)，確保數(shù)據(jù)的準確性和一致性。
第四章：代碼示例與解析
讓我們看一個例子。以下是兩種代碼片段，它們的功能是創(chuàng)建一個城市和國家提供者，當計數(shù)器增加時，按鈕不會重建。但第二種方法支持計數(shù)器被重置的情況。我們可以通過調(diào)用相關的函數(shù)來重置計數(shù)器，從而更新應用的狀態(tài)。
第一種代碼片段（不太理想）：
final cityProvider = Provider((ref) => 'London');
final countryProvider = Provider((ref) => 'England');
（此處省略了部分代碼）
改進后的代碼示例：
通過Provider創(chuàng)建城市和國家提供者時，我們可以使用ref.watch機制來避免不必要的重建。這樣，即使數(shù)據(jù)發(fā)生變化，我們的應用也能保持流暢的運行狀態(tài)。例如：
final cityProvider = Provider((ref) => ref.watch(...) ...); （具體實現(xiàn)方式根據(jù)實際需求進行編寫） 這種方式能夠更智能地管理應用的狀態(tài)，提高應用的性能。通過合理使用Provider和ref.watch機制，我們可以構建出高效、流暢的應用程序。這種方法還支持計數(shù)器的重置操作，為開發(fā)者提供了更多的靈活性。這些改進都是為了提升用戶體驗和應用的性能。隨著技術的不斷發(fā)展，我們將繼續(xù)探索更多的優(yōu)化方法和技巧。
