Flutter宇宙星空效果插件cosmos的使用

Flutter宇宙星空效果插件cosmos的使用

Cosmos Flutter Package ❤️

开发者：JeaFriday🎶

这个包是为了整合许多开发者努力创建的复杂材料，确保你的应用程序不会在代码行上挣扎！

包含的内容

以下是该包中包含的一些主要组件：

• CosmosAlert: 一个带有IOS、Material等选项的警报查看器。可以作为屏幕或只是显示警报。
• Cosmos Buttons: 可定制且更易访问的按钮。
• CosmosScroller: 一个自动滚动的布局。
• CosmosBody: 一个快速（Column）布局，为Scaffold的小部件提供自动滚动功能。
• CosmosTextBox: 完全可定制的TextField小部件。
• CosmosFirebase: 用于Google Firebase的Flutter包。
• CosmosTools: 包含你可能需要的潜在工具。

包文档

CosmosBackgroundImage

示例代码添加、编辑和更多背景图像到您的应用程序。

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: CosmosBackgroundImage(
        image: "assets/image.jpg", // 设置背景图片路径
        child: Center(), // 在背景上继续构建小部件树
      ),
    );
  }
}

CosmosTime

提供在您的Flutter应用程序中的时间相关功能。

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          onPressed: () {
            String dateTime = CosmosTime.getNowTimeString(); // 获取当前日期和时间
            print(dateTime);
          },
          child: const Text("data"),
        ),
      ),
    );
  }
}

CosmosAlert

展示各种样式的弹出框。

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          onPressed: () {
            CosmosAlert.showAnimatedDialog(
              context,
              "title",
              "text",
            ); // 显示一个经典风格的弹出框
          },
          child: const Text("data"),
        ),
      ),
    );
  }
}

CosmosScroller

创建一个可滚动的小部件。

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CosmosScroller(
          scrollDirection: Axis.horizontal, // 水平滚动方向
          children: [
            TextButton(
              onPressed: () {
                CosmosAlert.showCustomAlert(
                  context,
                  const Text("Hello World!"),
                );
              },
              child: const Text("data"),
            ),
          ],
        ),
      ),
    );
  }
}

CosmosBody

创建一个基于情况的可滚动Scaffold>body。

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CosmosBody(
          scrollDirection: Axis.vertical, // 垂直滚动方向
          scrollable: true, // 是否可滚动
          children: [
            TextButton(
              onPressed: () {
                CosmosAlert.showCustomAlert(
                  context,
                  const Text("Hello World!"),
                );
              },
              child: const Text("data"),
            ),
          ],
        ),
      ),
    );
  }
}

示例应用完整示例

以下是一个完整的示例应用，展示了如何使用Cosmos插件来创建一个简单的用户界面，包括顶部栏、按钮、菜单和页面导航。

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

void main() => runApp(const CosmosExample());

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: CosmosBody(
        scrollable: true,
        scrollDirection: Axis.vertical,
        children: [
          CosmosTopBar(
            logo: const Text(
              "Cosmos!",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20,
                color: Colors.white,
              ),
            ),
            leftIcon: Icons.menu,
            rightIcon: Icons.whatshot,
            children: [
              CosmosButton.button(
                text: "Classic Button",
                onTap: () {},
              ),
              CosmosButton.borderButton(
                text: "Border Button",
                onTap: () {},
              ),
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 10),
                width: 2,
                height: 20,
                color: Colors.white,
              ),
              CosmosButton.iconButton(
                icon: Icons.link,
                uri: "https://bybug.net",
              ),
              CosmosButton.iconButton(
                icon: Icons.menu,
                onTap: () {
                  CosmosSideMenu.openSideMenu();
                },
              ),
              CosmosButton.iconButton(
                icon: Icons.person,
                uri: "https://bybug.net",
              ),
            ],
          ),
          CosmosButton.borderButton(
            text: "Go to NewPage! (pushFromRightToLeft)",
            onTap: () {
              CosmosNavigator.pushFromRightToLeft(
                context,
                const NewPage(),
              );
            },
          ),
          CosmosButton.borderButton(
            text: "Show Toast",
            onTap: () {
              CosmosAlert.showToast(
                context,
                child: const Center(
                  child: Text(
                    "Hello World!",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.purple,
      body: Center(
        child: Text(
          "New Page!",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}