技术分享：Flutter集成旧项目，重构帖子详情页

2024-01-12 18:05:07

最近一直在做公司新项目的Flutter工作，主要负责部分Flutter页面的编写以及与原生Android的桥接。主要的集成工作由于人员紧张，交给平台组同学来做。公司平台组提供了一整套的集成工具链，开发工具，MVVM结构等一系列轮子，开箱即用。时间长了，只停留在使用层面，具体怎么实现的，自己也不太清楚，不利于快速开发Flutter页面。所以决定自己亲自做一遍Flutter集成的工作，方便快速开发Flutter页面。

Flutter集成

Flutter集成的整体流程如下：

创建Flutter项目
添加Flutter SDK到Android项目
配置Flutter模块
编写Flutter代码
构建Flutter APK

创建Flutter项目

创建一个新的Flutter项目，并将其命名为my_flutter_project。

flutter create my_flutter_project

添加Flutter SDK到Android项目

将Flutter SDK添加到Android项目的build.gradle文件中。

dependencies {
    ...
    classpath 'com.android.tools.build:gradle:3.5.0'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    classpath 'com.google.gms:google-services:4.3.3'
    classpath 'com.google.firebase:firebase-crashlytics-gradle:2.5.2'

    // Add the Flutter plugin
    classpath 'io.flutter.plugins.tools:gradle:1.0.6'
}

配置Flutter模块

在Android项目的settings.gradle文件中添加以下内容：

include ':flutter'

在Android项目的build.gradle文件中添加以下内容：

allprojects {
    repositories {
        google()
        jcenter()
    }
}

subprojects {
    repositories {
        google()
        jcenter()
    }
}

dependencies {
    implementation 'com.google.android.material:material:1.2.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.firebase:firebase-messaging:20.2.4'
}

编写Flutter代码

在Flutter项目中编写Flutter代码。

// Import the Flutter SDK
import 'package:flutter/material.dart';

// Create a new Flutter app
void main() {
  runApp(MyApp());
}

// Define the MyApp class
class MyApp extends StatelessWidget {
  // Define the build method
  @override
  Widget build(BuildContext context) {
    // Return a new MaterialApp widget
    return MaterialApp(
      // Define the home property
      home: MyHomePage(),
    );
  }
}

// Define the MyHomePage class
class MyHomePage extends StatelessWidget {
  // Define the build method
  @override
  Widget build(BuildContext context) {
    // Return a new Scaffold widget
    return Scaffold(
      // Define the appBar property
      appBar: AppBar(
        // Define the title property
        title: Text('My Flutter App'),
      ),

      // Define the body property
      body: Center(
        // Define the child property
        child: Text('Hello World!'),
      ),
    );
  }
}