Flutter霓虹灯效插件neon_x的使用

Flutter霓虹灯效插件neon_x的使用

neon_x

neon_x 是一个为 Flutter 提供自定义小部件和扩展的包，用于实现霓光设计风格。该包包含自定义图标、文本样式选项和时间轴小部件。

特性

  • NxIcon: 用于显示带有可选大小、颜色和缩放值的 SVG 图标的小部件。
  • NxFontSize: VxTextBuilder 的扩展，用于轻松调整字体大小。
  • NxFontWeight: VxTextBuilder 的扩展，用于设置字体粗细。
  • NxFonts: VxTextBuilder 的扩展，用于从 Google Fonts 设置自定义字体。
  • NxTimeLine: 具有可定制颜色、大小和交互式点击功能的时间轴小部件。

开始使用

要使用此包，请在项目的 pubspec.yaml 文件中添加 neon_x 作为依赖项：

dependencies:
  neon_x:

使用方法

NxIcon

import 'package:neon_x/neon_x.dart';

NxIcon('assets/icon.svg', size: 24, color: Colors.blue, scaleValue: 1.2)

NxFontSize

import 'package:neon_x/neon_x.dart';

'Hello'.text.s20.make()

NxFontWeight

import 'package:neon_x/neon_x.dart';

'Bold Text'.text.w6.make()

NxFonts

import 'package:neon_x/neon_x.dart';

'Text with Poppins Font'.text.poppins.make()

NxTimeLine

import 'package:neon_x/neon_x.dart';

NxTimeLine(
  currentPosition: 2,
  size: 5,
  filledColor: Colors.blue,
  lineColor: Colors.grey,
  onTap: (index) {
    // 处理时间轴点击事件
  },
)

示例代码

以下是使用 neon_x 包的一个完整示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Example',
      home: Home(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        // 使用 Google 字体
        "Lato".text.lato.make(),

        // SVG 作为图标
        const NxIcon(
          "icon.svg",
          color: Colors.amber,
        ),

        // 时间轴
        const NxTimeLine(
          currentPosition: 0,
          size: 3,
          filledColor: Colors.black,
          lineColor: Colors.white,
        ),
      ]),
    );
  }
}

更多关于Flutter霓虹灯效插件neon_x的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter霓虹灯效插件neon_x的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用neon_x插件来实现霓虹灯效果的代码示例。neon_x是一个流行的Flutter插件，用于创建具有霓虹灯效果的文本和图形。

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

dependencies:
  flutter:
    sdk: flutter
  neon_x: ^0.1.0  # 请注意版本号，使用最新版本

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

接下来，你可以在你的Flutter应用中使用NeonX组件来创建霓虹灯效果。以下是一个简单的示例，展示了如何使用NeonX来创建一个带有霓虹灯效果的文本：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NeonX Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NeonScreen(),
    );
  }
}

class NeonScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NeonX Demo'),
      ),
      body: Center(
        child: NeonX(
          text: 'Hello Neon!',
          color: Colors.cyan,
          flag: NeonFlag.FULL,
          size: 50.0,
          width: 4.0,
          blur: 10.0,
          spread: 2.0,
          alignment: Alignment.center,
        ),
      ),
    );
  }
}

在这个示例中：

  • NeonX组件用于创建霓虹灯效果的文本。
  • text参数指定要显示的文本。
  • color参数指定霓虹灯效果的颜色。
  • flag参数指定霓虹灯效果的样式，NeonFlag.FULL表示完整的霓虹灯效果。
  • size参数指定文本的大小。
  • width参数指定霓虹灯效果的宽度。
  • blur参数指定模糊程度。
  • spread参数指定霓虹灯效果的扩散程度。
  • alignment参数指定文本的对齐方式。

你可以根据需要调整这些参数以达到你想要的霓虹灯效果。此外，neon_x插件还支持其他类型的霓虹灯效果，你可以查阅其官方文档以了解更多详细信息和高级用法。

回到顶部