前言：flutter開發(fā)環(huán)境搭建Flutter的開發(fā)環(huán)境搭建-圖解_☆七年的博客-CSDN博客

第一個flutter簡單項目，內(nèi)容是一個主界面，其中：

? ? 1.內(nèi)容點擊數(shù)字自增

? ? 2.跳轉(zhuǎn)一個空頁，

? ? 3.跳轉(zhuǎn)一個WebView界面

其中涉及添加主鍵，新建界面類，導(dǎo)入依賴，使用WebView, 兼容http網(wǎng)絡(luò)安全

?一、主界面 main.dart文件

import 'package:flutter/material.dart';import 'package:flutterdemo/newpage.dart';import 'package:flutterdemo/webviewExamlpe.dart';void main() {runApp(const MyApp());}/// 這里我們的MyApp是一個類，繼承了StatelessWidgetclass MyApp extends StatelessWidget {const MyApp({super.key});/// 這個組件是這個app的根 這是一個無狀態(tài)部件，然后實現(xiàn)構(gòu)造方法，@overrideWidget build(BuildContext context) {///構(gòu)造方法里面通過MaterialApp()函數(shù)定義風格，然后是標題、主題和主頁面信息，return MaterialApp(title: 'Flutter Demo',theme: ThemeData(///這里有一個Colors.blue，你試一下改成red，或者green。///如果你這時候項目是運行在模擬器 或者真機上的話，你可以修改后Ctrl + S 進行保存。就能同步展示colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),useMaterial3: true,),///??這里主頁面home中調(diào)用MyHomePage()函數(shù)，也就是我們當前頁面所顯示的內(nèi)容。home: const MyHomePage(title: '主頁'),);}}/// 這里MyHomePage繼承StatefulWidget，/// 這是一個有狀態(tài)的部件，這里就需要一個狀態(tài)了，/// 通過createState()得到一個_MyHomePageState，/// 這個_MyHomePageState()就是這個頁面的主要內(nèi)容了，它里面是class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}void _goToNewPage() {Navigator.push(context,MaterialPageRoute(builder: (context) => NewPage()),);}// 例如，在主頁的某個按鈕點擊事件中進行頁面跳轉(zhuǎn)void _goToWebViewPage() {Navigator.push(context,MaterialPageRoute(builder: (context) => WebViewExample()),);}/// 在 build 方法中，我們通常通過對基礎(chǔ) Widget 進行相應(yīng)的 UI 配置，或是組合各類基礎(chǔ) Widget 的方式進行 UI 的定制化。@overrideWidget build(BuildContext context) {///這里返回一個Scaffold，這是一個腳手架，用來構(gòu)建頁面return Scaffold(///然后我們看Scaffold中的內(nèi)容，AppBar 是頁面的導(dǎo)航欄，我們直接將 MyHomePage 中的 title 屬性作為標題使用。appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,///這里我們從App.build方法創(chuàng)建的MyHomePage對象中獲取值，并使用它來設(shè)置appbar的標題。title: Text(widget.title),),///body 主題內(nèi)容body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('你可以點擊按鈕增加數(shù)字:',),Text('$_counter',style: Theme.of(context).textTheme.headlineMedium,),///按鈕，_incrementCounter 作為其點擊處理函數(shù)，數(shù)字自增。ElevatedButton(onPressed: () {_incrementCounter();},// child: const Icon(Icons.add),child: const Icon(Icons.add),),///按鈕。我們將??_goToNewPage 作為其點擊處理函數(shù)，跳轉(zhuǎn)空白頁ElevatedButton(onPressed: () {_goToNewPage();},// child: const Icon(Icons.add),child: Text('click me ,go to newPage'),),],),),///懸浮按鈕，則是頁面右下角的帶“->”的懸浮按鈕。我們將??_goToWebViewPager 作為其點擊處理函數(shù)。floatingActionButton: FloatingActionButton(onPressed: _goToWebViewPage,tooltip: 'Go to New Page',child: const Icon(Icons.arrow_forward),),);}}

?

二、空頁面 newpager.dart

import 'package:flutter/material.dart';class NewPage extends StatelessWidget {const NewPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('New Page'),),body: const Center(child: Text('This is a new page!',style: TextStyle(fontSize: 20),),),);}}

三、Webview界面 webViewExample.dart

import 'package:flutter/material.dart';import 'package:webview_flutter/webview_flutter.dart';class WebViewExample extends StatefulWidget {@override_WebViewExampleState createState() => _WebViewExampleState();}class _WebViewExampleState extends State<WebViewExample> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Web View Example'),),body: const WebView(initialUrl: 'http://www.baidu.com', // 替換為你想要嵌套的網(wǎng)頁地址javascriptMode: JavascriptMode.unrestricted, // 允許執(zhí)行JavaScript代碼),);}}

其中在pubspec.yaml文件中添加webview_flutter插件依賴： 然后運行flutter pub get來獲取插件依賴。

四.可能遇到的問題

1.flutter 打開網(wǎng)頁ERR_CLEARTEXT_NOT_PERMITTED

方案：?在`android/app/src/main/AndroidManifest.xml`文件中的`application`標簽下添加以下行：

```xml

android:usesCleartextTraffic="true"

```

- 保存文件并重新編譯Flutter應(yīng)用。

https://blog.csdn.net/ly_xiamu/article/details/131931357

2.minSdkVersion is 16 不匹配，直接修改android/app/src/build.gradle 改成對應(yīng)的如 19

五.編譯出apk

1.你可以直接在AS中運行或者項目cmd命令行中flutter build apk命令來生成未簽名的APK文件，它將位于Flutter項目的/build/app/outputs/flutter-apk目錄下。

2.簽名apk

給APK簽名—兩種方式（flutter android 安裝包）_☆七年的博客-CSDN博客

創(chuàng)造價值，樂哉分享！776147358