Flutter通用UI组件插件universal

Flutter通用UI组件插件universal_ui的使用

Universal UI

临时修复dart: ui问题。

开始使用

此插件是为了解决dart: ui相关问题的一个临时解决方案。

一些相关的讨论帖：

这个解决方案并非我的原创，我只是将其发布在pub.dev上以便更方便地使用。

如果你希望我为此方案署名，请发送邮件至：flutterlabz@gmail.com。

因为我不知道最初是谁提出了这个想法，我希望这个插件能够帮助那些遇到相同问题的人。

如何使用

首先，导入该包：

import 'package:universal_ui/universal_ui.dart';

然后，像往常一样使用ui对象。你不需要创建别名并添加忽略语句：

...
ui.platformViewRegistry.registerViewFactory(
    'iframeElement',
    (int viewId) => _iframeElement,
);
...

完整示例代码

以下是一个完整的示例代码，展示如何在Flutter应用中使用universal_ui插件。

import 'package:flutter/material.dart';
import 'package:universal_ui/universal_ui.dart'; // 导入universal_ui包

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(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

yibo5220 1楼•24 天前

更多关于Flutter通用UI组件插件universal_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

universal_ui 是一个 Flutter 插件，旨在提供跨平台的通用 UI 组件和工具，帮助开发者更轻松地构建适应不同平台（如 Android、iOS、Web、Desktop 等）的应用程序。它提供了一些常见的 UI 组件和工具，以确保在不同平台上保持一致的用户体验。

安装 `universal_ui`

首先，你需要在 pubspec.yaml 文件中添加 universal_ui 依赖：

dependencies:
  flutter:
    sdk: flutter
  universal_ui: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

使用 `universal_ui`

universal_ui 提供了多种跨平台的 UI 组件和工具。以下是一些常见的用法示例：

1. 跨平台的 TextField

universal_ui 提供了一个跨平台的 TextField 组件，可以在不同平台上保持一致的行为和样式。

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

class MyTextField extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Universal UI TextField'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: UniversalTextField(
          decoration: InputDecoration(
            labelText: 'Enter your text',
            border: OutlineInputBorder(),
          ),
        ),
      ),
    );
  }
}

2. 跨平台的 Button

universal_ui 还提供了一个跨平台的 Button 组件，可以在不同平台上保持一致的外观和行为。

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

class MyButton extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Universal UI Button'),
      ),
      body: Center(
        child: UniversalButton(
          onPressed: () {
            print('Button Pressed!');
          },
          child: Text('Click Me'),
        ),
      ),
    );
  }
}

3. 跨平台的 Dialog

universal_ui 提供了一个跨平台的 Dialog 组件，可以在不同平台上保持一致的外观和行为。

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

class MyDialog extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Universal UI Dialog'),
      ),
      body: Center(
        child: UniversalButton(
          onPressed: () {
            showUniversalDialog(
              context: context,
              builder: (context) {
                return UniversalAlertDialog(
                  title: Text('Alert'),
                  content: Text('This is a universal dialog.'),
                  actions: [
                    UniversalTextButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text('OK'),
                    ),
                  ],
                );
              },
            );
          },
          child: Text('Show Dialog'),
        ),
      ),
    );
  }
}

4. 跨平台的 Platform-specific 样式

universal_ui 还提供了一些工具来根据平台应用不同的样式或行为。例如，你可以使用 UniversalPlatform 来检查当前运行的平台。

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

class PlatformSpecificWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Platform Specific Widget'),
      ),
      body: Center(
        child: Text(
          UniversalPlatform.isAndroid
              ? 'Running on Android'
              : UniversalPlatform.isIOS
                  ? 'Running on iOS'
                  : UniversalPlatform.isWeb
                      ? 'Running on Web'
                      : 'Running on Unknown Platform',
        ),
      ),
    );
  }
}

Flutter通用UI组件插件universal_ui的使用