Flutter原生UI组件库插件nativebase_flutter的使用

NativeBase + Flutter = 💙

NativeBase 是一个基于React和React Native的设计系统和通用组件库。NativeBase在React和React Native社区中获得了广泛的认可。我们GeekyAnts正在尝试将这一设计系统引入到Flutter中。因此，我们发布了alpha版本的Flutter插件，邀请Flutter开发者尝试此包以构建UI。

NativeBase设计系统建立在Material设计系统之上，并采用基于令牌的UI开发方式。

此alpha版本包含最少的NativeBase小部件：

原始小部件

• Box
• NBText

复合小部件

• NBCard
• Heading

安装指南

在你的pubspec.yaml文件中添加以下依赖项：

nativebase_flutter: 0.1.0-alpha.0

然后在你的main.dart文件中导入该包：

import 'package:nativebase_flutter/nativebase_flutter.dart';

接着，在Widget树中注入NativeBaseProvider：

// 这个widget是应用的根节点。
[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    home: NativeBaseProvider(
      theme: appTheme,
      child: const NativeBaseExample(),
    ),
  );
}

注意：为了正确解析主题中的令牌，必须将NativeBaseProvider放置在Widget树的顶层。

你也可以通过NativeBaseProvider类的of方法访问NativeBase Tokens：

NativeBaseProvider.of(context).component.heading.md.fontSize;
NativeBaseProvider.of(context).component.heading.md.letterSpacing;

上述代码片段将返回Heading组件的md大小下的fontSize和letterSpacing值。

注意：NativeBase令牌解析引擎会从主题中解析令牌。

NativeBase设计系统Figma工具包

NativeBase组件库提供了模块化且可访问的组件，使设计师和开发者更容易在他们的React和React Native应用程序中设计和构建所有组件。

使用NativeBase构建

代码示例

Widget card() {
  var img = 'https://tinyurl.com/4e7fty6f';
  return NBCard(
    m: '2',
    bgImage: img,
    color: 'cyan.700',
    child: Row(
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: const [
                Box(
                  child: NBText(
                    text: "Today @ 9PM",
                    color: 'white',
                  ),
                ),
              ],
            ),
            const Heading(
              text: "Let's talk about avatar!",
              color: 'white',
            ),
            const Box(
              alignment: 'center',
              mt: '3',
              color: 'cyan.400',
              p: '3',
              borderRadius: '6',
              child: NBText(
                text: "Remind Me",
                textTransform: 'capital',
                color: 'white',
              ),
            ),
          ],
        ),
        Box(
          ml: '3',
          h: '90',
          w: '90',
          p: '10',
          borderWidth: '3',
          borderColor: 'white',
          bgImage: 'https://tinyurl.com/2vfrtp7d',
          borderRadius: 'full',
        ),
      ],
    ),
  );
}

完整示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: NativeBaseProvider(
        theme: appTheme,
        child: const NativeBaseExample(),
      ),
    );
  }
}

class NativeBaseExample extends StatefulWidget {
  const NativeBaseExample({super.key});

  [@override](/user/override)
  State<NativeBaseExample> createState() => _NativeBaseExampleState();
}

class _NativeBaseExampleState extends State<NativeBaseExample> {
  Widget card() {
    NativeBaseProvider.of(context).component.heading.md.letterSpacing;
    var img = 'https://tinyurl.com/4e7fty6f';
    return NBCard(
      m: '2',
      bgImage: img,
      color: 'cyan.700',
      child: Row(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                children: const [
                  Box(
                    child: NBText(
                      text: "Today @ 9PM",
                      color: 'white',
                    ),
                  ),
                ],
              ),
              const Heading(
                text: "Let's talk about avatar!",
                color: 'white',
              ),
              const Box(
                alignment: 'center',
                mt: '3',
                color: 'cyan.400',
                p: '3',
                borderRadius: '6',
                child: NBText(
                  text: "Remind Me",
                  textTransform: 'capital',
                  color: 'white',
                ),
              ),
            ],
          ),
          const Box(
            ml: '3',
            h: '90',
            w: '90',
            p: '10',
            borderWidth: '3',
            borderColor: 'white',
            bgImage: 'https://tinyurl.com/2vfrtp7d',
            borderRadius: 'full',
          ),
        ],
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            NBCard(
              shadow: '1',
              child: NBText(
                text: "This Card looks awesome",
              ),
            )
          ],
        ),
      ),
    );
  }
}