Flutter赛博朋克风格UI工具包插件cyber_punk_tool_kit_ui的使用

欢迎来到Cyber-Punk Tool Kit UI Flutter插件！此插件为您的Flutter应用程序用户界面带来了未来主义的赛博朋克美学。受《赛博朋克2077》视觉效果的启发，Cyber-Punk Tool Kit UI插件提供了一套可定制的UI组件，可以无缝集成到您的应用中。

特性

CyberContainerOne：一个具有对角线框架和渐变背景的艺术容器。您可以自定义框架和背景颜色，并控制填充以灵活放置内容。
CyberContainerTwo：一个具有可定制艺术框架和渐变背景的多功能容器。通过独特的视觉效果展示内容。
SingleDiagonalContainer：一个具有对角线渐变背景的视觉独特容器。适合强调关键内容。
CyberButton：一个具有动态多层渐变设计的创新按钮。通过精致的外观增强UI交互。

安装

要将Cyber-Punk Tool Kit UI插件添加到您的Flutter应用中，请将其作为依赖项添加到pubspec.yaml文件：

dependencies:
  cyber_punk_tool_kit_ui: ^0.0.1

然后，在Dart代码中导入该插件：

import 'package:cyber_punk_tool_kit_ui/cyber_punk_tool_kit_ui.dart';

使用方法

查看示例文件夹，了解如何将Cyber-Punk Tool Kit UI组件集成到您的应用中。

CyberContainerOne

import 'package:cyber_punk_tool_kit_ui/cyber_glass_container.dart';
import 'package:flutter/material.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CyberContainerOne(
      width: 700,
      height: 500,
      child: Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          image: DecorationImage(
            fit: BoxFit.fill,
            image: AssetImage('assets/map.jpg'), // 确保路径正确
          ),
        ),
      ),
    );
  }
}

CyberContainerTwo

import 'package:cyber_punk_tool_kit_ui/src/containers/cyber_container_two.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';

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

  BoxDecoration get _boxDecoration => BoxDecoration(
    color: Colors.black.withOpacity(1),
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    const padding = EdgeInsets.all(8);
    const margin = EdgeInsets.symmetric(vertical: 4);
    const textStyle = TextStyle(
      fontWeight: FontWeight.bold,
      color: Colors.white,
    );
    return CyberContainerTwo(
      width: 300,
      height: 500,
      child: Card(
        color: Colors.transparent,
        child: SizedBox(
          child: Padding(
            padding: padding,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                const Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'Albint3r:',
                    style: textStyle,
                  ),
                ),
                Container(
                  decoration: _boxDecoration,
                  padding: padding,
                  margin: margin,
                  child: Text(
                    'Hey, you found any clean water lately?',
                    style: textStyle.copyWith(
                      fontWeight: FontWeight.normal,
                    ),
                  ),
                ),
                const Gap(10),
                const Align(
                  alignment: Alignment.centerRight,
                  child: Text(
                    'NoobMaster:',
                    style: textStyle,
                  ),
                ),
                Container(
                  decoration: _boxDecoration,
                  padding: padding,
                  margin: margin,
                  child: Text(
                    'Yeah, I got lucky and found a hidden stash yesterday.',
                    style: textStyle.copyWith(
                      fontWeight: FontWeight.normal,
                    ),
                  ),
                ),
                const Gap(10),
                const Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'Albint3r:',
                    style: textStyle,
                  ),
                ),
                Container(
                  decoration: _boxDecoration,
                  padding: padding,
                  margin: margin,
                  child: Text(
                    'That\'s great! We need all the supplies we can get in this wasteland.',
                    style: textStyle.copyWith(
                      fontWeight: FontWeight.normal,
                    ),
                  ),
                ),
                // 您可以继续添加更多消息
              ],
            ),
          ),
        ),
      ),
    );
  }
}

CyberButton

import 'package:cyber_punk_tool_kit_ui/src/buttons/cyber_button.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Gap(10),
        CyberButton(
          width: 200,
          height: 50,
          primaryColorBigContainer: Colors.orange,
          secondaryColorBigContainer: Colors.purple,
          child: Text(
            'PLAY',
            style: TextStyle(color: Colors.white),
          ),
        ),
        Gap(10),
        CyberButton(
          width: 200,
          height: 50,
          primaryColorBigContainer: Colors.greenAccent,
          secondaryColorBigContainer: Colors.blueAccent,
          child: Text(
            'PAUSE',
            style: TextStyle(color: Colors.white),
          ),
        ), 
        Gap(10),
        CyberButton(
          width: 200,
          height: 50,
          primaryColorBigContainer: Colors.black,
          secondaryColorBigContainer: Colors.greenAccent,
          child: Text(
            'EXIT',
            style: TextStyle(color: Colors.white),
          ),
        ),
        Gap(10),
        CyberButton(
          width: 200,
          height: 50,
          primaryColorBigContainer: Colors.redAccent,
          secondaryColorBigContainer: Colors.yellowAccent,
          child: Text(
            'SETTINGS',
            style: TextStyle(color: Colors.white),
          ),
        )
      ],
    );
  }
}

完整示例

以下是完整的示例代码，展示了如何在应用中使用这些组件：

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

import 'buttons_menu.dart';
import 'chat_example.dart';
import 'map_example.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cyber example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Cyber example'),
        ),
        body: Container(
          alignment: Alignment.topLeft,
          decoration: const BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.fill,
              image: AssetImage('assets/cyber2.jpg'), // 确保路径正确
            ),
          ),
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ChatExample(),
                Gap(10),
                MapExample(),
                Gap(10),
                ButtonsMenu(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter赛博朋克风格UI工具包插件cyber_punk_tool_kit_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

phonegap100 1楼•2 天前

更多关于Flutter赛博朋克风格UI工具包插件cyber_punk_tool_kit_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何使用Flutter赛博朋克风格UI工具包插件cyber_punk_tool_kit_ui的示例代码案例。请注意，实际使用中，你需要确保已经正确地在pubspec.yaml文件中添加了该插件的依赖，并且已经运行了flutter pub get来安装它。

首先，确保你的pubspec.yaml文件中包含以下依赖项（假设该插件在pub.dev上可用，且名称为cyber_punk_tool_kit_ui）：

dependencies:
  flutter:
    sdk: flutter
  cyber_punk_tool_kit_ui: ^latest_version  # 替换为实际的最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下方式使用cyber_punk_tool_kit_ui插件来创建一个具有赛博朋克风格的界面。以下是一个简单的示例代码：

import 'package:flutter/material.dart';
import 'package:cyber_punk_tool_kit_ui/cyber_punk_tool_kit_ui.dart'; // 导入插件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cyber Punk UI Demo',
      theme: ThemeData(
        // 使用插件提供的主题（如果插件支持的话）
        // primarySwatch: Colors.blue, // 这里可以替换为插件提供的主题色
      ),
      home: CyberPunkHomePage(),
    );
  }
}

class CyberPunkHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cyber Punk UI Demo'),
        backgroundColor: CyberPunkColors.neonBlue, // 使用插件提供的颜色
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CyberPunkButton(
              label: 'Click Me',
              onPressed: () {
                // 按钮点击事件
                print('Button clicked!');
              },
            ),
            SizedBox(height: 20),
            CyberPunkTextField(
              hintText: 'Type something...',
              onChanged: (value) {
                // 文本改变事件
                print('Text changed to: $value');
              },
            ),
            SizedBox(height: 20),
            CyberPunkCard(
              child: ListTile(
                leading: Icon(Icons.info),
                title: Text('Info Card'),
                subtitle: Text('This is a cyberpunk styled card.'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 假设插件提供了这些组件和颜色，如果没有，请根据插件实际提供的API进行调整
// CyberPunkColors, CyberPunkButton, CyberPunkTextField, CyberPunkCard 等都是假设的组件和类

请注意，上述代码中的CyberPunkColors, CyberPunkButton, CyberPunkTextField, CyberPunkCard等组件和类都是基于假设的，因为实际的cyber_punk_tool_kit_ui插件可能提供不同的组件和命名。因此，你需要参考插件的官方文档或源代码来了解其实际提供的API和组件。

如果插件提供了示例代码或文档，那么遵循那些指南将是最准确的使用方式。此外，确保你的Flutter环境是最新的，以避免任何兼容性问题。