🏆作者簡介，黑夜開發者，CSDN領軍人物，全棧領域優質創作者?，CSDN博客專家，阿里云社區專家博主，2023年6月CSDN上海賽道top4。
🏆數年電商行業從業經驗，歷任核心研發工程師，項目技術負責人。
🎉歡迎 👍點贊?評論?收藏

---

🚀一、背景

在移動應用開發中，為了在不同平臺上提供一致的用戶體驗，我們通常需要編寫不同的代碼來適應不同的操作系統和設備。但是有了Flutter，我們可以使用一套代碼構建多個平臺的應用，包括iOS、Android、Web和桌面。

本文將介紹如何使用Flutter來構建一套代碼適配多端應用，并給出具體的步驟和示例代碼。

🚀二、開始開發多端應用

🔎2.1 安裝Flutter

首先，需要在您的計算機上安裝Flutter。請按照Flutter官方文檔的指引進行安裝，并確保配置好Flutter環境變量。

🔎2.2 創建Flutter項目

使用命令行工具或者您喜歡的集成開發環境（IDE），創建一個新的Flutter項目。

$ flutter create multiplatform_app

這將在您的當前目錄下創建一個名為multiplatform_app的Flutter項目。

🔎2.3 編寫共享代碼

在Flutter中，我們可以使用Dart語言編寫共享代碼，包括界面布局、業務邏輯等。創建一個名為shared的文件夾，并在其中創建一個名為shared.dart的文件。

該文件將包含我們要共享的代碼。例如，以下是一個簡單的計數器應用的示例：

class Counter {int _count = 0;int get count => _count;void increment() {_count++;}void decrement() {_count--;}
}

🔎2.4 編寫平臺特定代碼

接下來，我們需要為每個目標平臺編寫特定的代碼。在lib文件夾下，為不同的平臺創建對應的文件夾，例如ios、android、web和desktop。

在各自的文件夾中，創建一個名為main.dart的文件，并編寫平臺特定的代碼。以下是一個簡單的示例：

// ios/main.dart
import 'package:flutter/cupertino.dart';
import 'package:multiplatform_app/shared/shared.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {final Counter counter = Counter();@overrideWidget build(BuildContext context) {return CupertinoApp(home: CupertinoPageScaffold(navigationBar: CupertinoNavigationBar(middle: Text('Counter App'),),child: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('Count: ${counter.count}'),SizedBox(height: 16),CupertinoButton(child: Text('Increment'),onPressed: () => counter.increment(),),SizedBox(height: 8),CupertinoButton(child: Text('Decrement'),onPressed: () => counter.decrement(),),],),),),);}
}

// android/main.dart
import 'package:flutter/material.dart';
import 'package:multiplatform_app/shared/shared.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {final Counter counter = Counter();@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Counter App',theme: ThemeData(primarySwatch: Colors.blue),home: Scaffold(appBar: AppBar(title: Text('Counter App')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('Count: ${counter.count}'),SizedBox(height: 16),ElevatedButton(child: Text('Increment'),onPressed: () => counter.increment(),),SizedBox(height: 8),ElevatedButton(child: Text('Decrement'),onPressed: () => counter.decrement(),),],),),),);}
}

// web/main.dart
import 'package:flutter/material.dart';
import 'package:multiplatform_app/shared/shared.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {final Counter counter = Counter();@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Counter App',theme: ThemeData(primarySwatch: Colors.blue),home: Scaffold(appBar: AppBar(title: Text('Counter App')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('Count: ${counter.count}'),SizedBox(height: 16),ElevatedButton(child: Text('Increment'),onPressed: () => counter.increment(),),SizedBox(height: 8),ElevatedButton(child: Text('Decrement'),onPressed: () => counter.decrement(),),],),),),);}
}

// desktop/main.dart
import 'package:flutter/material.dart';
import 'package:multiplatform_app/shared/shared.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {final Counter counter = Counter();@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Counter App',theme: ThemeData(primarySwatch: Colors.blue),home: Scaffold(appBar: AppBar(title: Text('Counter App')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('Count: ${counter.count}'),SizedBox(height: 16),ElevatedButton(child: Text('Increment'),onPressed: () => counter.increment(),),SizedBox(height: 8),ElevatedButton(child: Text('Decrement'),onPressed: () => counter.decrement(),),],),),),);}
}

根據不同平臺的特點，我們可以使用不同的UI組件和布局來創建界面。

🔎2.5 運行應用

最后，使用命令行工具或者IDE來運行應用程序。根據你選擇的平臺，執行相應的命令即可。

# 運行iOS應用
$ flutter run -d ios# 運行Android應用
$ flutter run -d android# 運行Web應用
$ flutter run -d chrome# 運行桌面應用
$ flutter run -d windows

這樣，您就可以在不同的平臺上看到同一套代碼構建的應用程序了！

總結：

• 安裝Flutter并配置環境變量
• 創建Flutter項目
• 編寫共享代碼
• 為不同的平臺編寫特定代碼
• 運行應用程序

🚀三、Flutter書籍推薦

🔎3.1 書籍介紹

從零基礎到精通Flutter開發

本書由淺入深地帶領讀者進入Flutter開發的世界，從Flutter的起源講起，逐步深入Flutter進階實戰，并在最后配合項目實戰案例，讓讀者不但可以系統地學習Flutter編程的相關知識，而且還能對Flutter應用開發有更為深入的理解

🔎3.2 核心內容

一套代碼，構建多平臺精美的應用：本書從真實的開發場景出發，完整地講解了Flutter框架，幫助你快速掌握Flutter的基礎知識和開發技巧，助你在移動應用開發領域取得成功！

🔎3.3 特色

經典：凝聚作者6年App開發經驗，獨家奉獻開發技巧。
深入：從入門、進階到實戰開發，由淺入深，詳細闡述Flutter開發技術。
全面：幾乎涵蓋了Flutter開發涉及的所有核心知識點，體現了從零基礎到精通學習的全過程。
獨立：各章內容相對獨立，可以按照順序閱讀，也可以通過目錄閱讀需要的內容。

🔎3.4 主要內容截圖

🔎3.5 如何領書

————————————————
本次本篇文章送書 🔥1-2本 評論區抽1-2位小伙伴送書
活動時間：截止到 2023-12-10 20:00:00
抽獎方式：利用網絡公開的在線抽獎工具進行抽獎
參與方式：關注、點贊、收藏，從評論區隨機抽選小伙伴。
根據文章閱讀量的多少來安排送書的本數。
————————————————

🔥 注：活動結束后，會私信中獎粉絲的，各位注意查看私信哦！

小伙伴也可以訪問鏈接進行自主購買哦~

當當購買鏈接直達，京東購買鏈接

🚀四、總結

今天主要講解了Flutter開發實踐用一套代碼構建多端精美應用的構建流程，初步認識了Flutter以及它解決了什么問題，最后還給大家推薦了書籍。希望本文對您有所幫助。

今天的內容就到這里，我們下次見。