Flutter原生界面集成插件shell

Flutter原生界面集成插件shell_uikit的使用

shell_uikit

shell_uikit 是 flutter_distributor 的一部分。更多详细信息请参阅 flutter_distributor 和 https://distributor.leanflutter.org。

安装

首先，在你的 pubspec.yaml 文件中添加 shell_uikit 依赖：

dependencies:
  shell_uikit: ^1.0.0

然后运行 flutter pub get 来获取依赖。

使用

以下是一个简单的示例来展示如何在Flutter应用中集成 shell_uikit 插件。

1. 初始化插件

在你的 main.dart 文件中初始化 shell_uikit 插件：

import 'package:flutter/material.dart';
import 'package:shell_uikit/shell_uikit.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化shell_uikit插件
    ShellUIKit.init();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Text('Hello World!'),
      ),
    );
  }
}

2. 使用ShellUIKit组件

现在，你可以开始使用 ShellUIKit 提供的组件了。以下是一个简单的例子，展示如何使用 ShellUIKit 中的 ShellAppBar 组件。

import 'package:flutter/material.dart';
import 'package:shell_uikit/shell_uikit.dart';

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化shell_uikit插件
    ShellUIKit.init();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ShellAppBar(
        title: Text('使用ShellUIKit'),
        actions: [
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {
              // 添加设置按钮的逻辑
            },
          ),
        ],
      ),
      body: Center(
        child: Text('Hello World with ShellUIKit!'),
      ),
    );
  }
}

更多关于Flutter原生界面集成插件shell_uikit的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼

更多关于Flutter原生界面集成插件shell_uikit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter应用中集成原生界面插件shell_uikit可以通过创建平台通道（Platform Channels）来实现。shell_uikit假设是一个自定义的原生插件，用于在Flutter中调用原生iOS和Android的界面组件。以下是如何在Flutter项目中集成并使用该插件的示例代码。

1. 创建Flutter插件项目

首先，你需要确保已经创建了Flutter插件项目。如果你还没有创建，可以使用以下命令：

flutter create --template=plugin my_shell_uikit_plugin

将my_shell_uikit_plugin替换为你想要的插件名称。

2. 实现iOS原生代码

在ios/Classes/MyShellUIKitPlugin.m文件中实现iOS原生代码。例如，假设你想展示一个简单的原生UIAlertController：

#import <Flutter/Flutter.h>
#import <UIKit/UIKit.h>

@interface MyShellUIKitPlugin : NSObject<FlutterPlugin>
@end

@implementation MyShellUIKitPlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
    FlutterMethodChannel* channel = [FlutterMethodChannel
                                      methodChannelWithName:@"my_shell_uikit"
                                      binaryMessenger:[registrar messenger]];
    MyShellUIKitPlugin* instance = [[MyShellUIKitPlugin alloc] init];
    [channel setMethodCallHandler:[instance methodCallHandler]];
}

- (void)methodCallHandler:(FlutterMethodCall*)call result:(FlutterResult)result {
    if ([call.method isEqualToString:@"showAlert"]) {
        UIViewController *viewController = [UIApplication sharedApplication].keyWindow.rootViewController;
        UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Alert"
                                                                         message:@"This is a native alert from iOS."
                                                                  preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *ok = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
        [alert addAction:ok];
        [viewController presentViewController:alert animated:YES completion:nil];
        result(nil);
    } else {
        result(FlutterMethodNotImplemented);
    }
}
@end

3. 实现Android原生代码

在android/src/main/kotlin/com/example/my_shell_uikit_plugin/MyShellUIKitPlugin.kt文件中实现Android原生代码。例如，假设你想展示一个简单的Toast消息：

package com.example.my_shell_uikit_plugin

import android.content.Context
import android.widget.Toast
import io.flutter.embedding.engine.plugins.FlutterPlugin
import io.flutter.embedding.engine.plugins.activity.ActivityAware
import io.flutter.embedding.engine.plugins.activity.ActivityPluginBinding
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.MethodCallHandler
import io.flutter.plugin.common.MethodChannel.Result

class MyShellUIKitPlugin: FlutterPlugin, MethodCallHandler, ActivityAware {
    private lateinit var channel: MethodChannel
    private var context: Context? = null

    override fun onAttachedToEngine(binding: FlutterPluginBinding) {
        channel = MethodChannel(binding.binaryMessenger, "my_shell_uikit")
        channel.setMethodCallHandler(this)
    }

    override fun onMethodCall(call: MethodCall, result: Result) {
        if (call.method == "showToast") {
            val message = call.argument<String>("message") ?: ""
            Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
            result.success(null)
        } else {
            result.notImplemented()
        }
    }

    override fun onDetachedFromEngine(binding: FlutterPluginBinding) {
        channel.setMethodCallHandler(null)
    }

    override fun onAttachedToActivity(binding: ActivityPluginBinding) {
        context = binding.activity
    }

    override fun onDetachedFromActivityForConfigChanges() {
        context = null
    }

    override fun onReattachedToActivityForConfigChanges(binding: ActivityPluginBinding) {
        context = binding.activity
    }

    override fun onDetachedFromActivity() {
        context = null
    }
}

4. 在Flutter项目中调用插件

在你的Flutter项目中，你可以通过MethodChannel来调用这些原生方法。例如：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  static const platform = MethodChannel('my_shell_uikit');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shell UIKit Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _showNativeAlert,
            child: Text('Show Native Alert'),
          ),
        ),
      ),
    );
  }

  Future<void> _showNativeAlert() async {
    try {
      // Call the showAlert method on iOS
      // Call the showToast method on Android
      if (defaultTargetPlatform == TargetPlatform.iOS) {
        await platform.invokeMethod('showAlert');
      } else if (defaultTargetPlatform == TargetPlatform.android) {
        await platform.invokeMethod('showToast', {'message': 'This is a native toast from Android.'});
      }
    } on PlatformException catch (e) {
      print("Failed to invoke: '${e.message}'.");
    }
  }
}

这个示例展示了如何在Flutter应用中集成并使用一个假设的shell_uikit插件来展示原生界面组件。注意，shell_uikit是一个假设的插件名称，你需要根据实际情况调整代码。