Flutter自定义容器插件new_fancy_flutter_container的使用

new_fancy_flutter_container

一个全新的Flutter包项目。

特性

• 用户可以创建带有装饰效果的容器。
• 简单易用的装饰功能。

开始使用

要使用此包，在您的pubspec.yaml文件中添加text_scroll作为依赖项。

dependencies:
  new_fancy_flutter_container: ^0.0.6

然后运行以下命令以获取依赖项：

flutter pub get

使用方法

最小化示例

在pubspec.yaml中添加依赖后，您可以导入并使用该插件。

import 'package:new_fancy_flutter_container/fancy_container.dart';

自定义设置

以下是一个完整的示例，展示如何使用new_fancy_flutter_container创建一个带有渐变背景的容器，并在其中放置一些文本。

import 'package:flutter/material.dart';
import 'package:new_fancy_flutter_container/fancy_container.dart';

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

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

  // 这是应用程序的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: myHome(),
    );
  }
}

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

  [@override](/user/override)
  State<myHome> createState() => _myHomeState();
}

class _myHomeState extends State<myHome> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: FancyContainer(
        // 设置容器的高度为屏幕高度的一半
        height: MediaQuery.of(context).size.height / 2,
        // 设置容器的两种颜色，用于渐变效果
        color1: Colors.amber,
        color2: Colors.black,
        // 设置容器的宽度为屏幕宽度
        width: MediaQuery.of(context).size.width,
        // 在容器中放置一个居中的文本
        child: Center(
          child: Text(
            "数据",
            style: TextStyle(
              color: Colors.white, // 文本颜色为白色
              fontSize: 40,         // 字号为40
              fontWeight: FontWeight.w600, // 字体加粗
            ),
          ),
        ),
      ),
    );
  }
}

示例代码

以下是完整的示例代码，您可以直接复制并在您的Flutter项目中运行。

import 'package:flutter/material.dart';
import 'package:new_fancy_flutter_container/fancy_container.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',
      theme: ThemeData(
        // 设置主题颜色方案
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: FancyContainer(
        child: Text("数据"),
      ),
    );
  }
}