Flutter自定义容器样式插件stylish_container_achin_package的使用

Flutter自定义容器样式插件stylish_container_achin_package的使用

特性

  • Stylish 容器
  • 渐变背景

开始使用

  • 文本非常适合使用Stylish容器

使用方法

// 导入包
import 'package:stylish_container_achin_package/stylish_container_achin_package.dart';

// 在你的代码中使用
Container(
  width: widget.width ?? widget.width, // 设置宽度
  height: widget.height ?? widget.height, // 设置高度
  decoration: BoxDecoration(
    // color: Colors.red, // 如果需要固定颜色可以取消注释
    gradient: LinearGradient(colors: [ // 设置渐变颜色
      widget.startColor ?? widget.startColor!,
      widget.endColor ?? widget.endColor!
    ]),
    borderRadius: BorderRadius.circular(widget.roundness ?? 30), // 设置圆角
  ),
  child: Center(
    child: Text(
      widget.title ?? "Sample", // 设置文本内容
      style: TextStyle(color: widget.textColor ?? widget.textColor), // 设置文本颜色
    ),
  ),
)

示例用法

以下是一个完整的示例，展示了如何在Flutter应用中使用stylish_container_achin_package。

首先，在pubspec.yaml文件中添加依赖项：

dependencies:
  stylish_container_achin_package: ^1.0.0 # 请根据实际版本号进行修改

然后在你的Dart文件中导入包并使用它：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stylish Container Demo')),
        body: Center(
          child: StylishContainer(
            width: 200,
            height: 100,
            startColor: Colors.blue,
            endColor: Colors.green,
            roundness: 15,
            title: "Hello, World!",
            textColor: Colors.white,
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义容器样式插件stylish_container_achin_package的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义容器样式插件stylish_container_achin_package的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


stylish_container_achin_package 是一个用于 Flutter 的自定义容器样式插件，它可以帮助你轻松地创建具有各种样式的容器。使用这个插件，你可以快速地为你的应用程序添加漂亮的容器，而不需要编写大量的自定义代码。

安装插件

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

dependencies:
  stylish_container_achin_package: ^1.0.0  # 请确保使用最新版本

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

基本使用

安装完插件后，你可以在你的 Flutter 项目中使用 StylishContainer 组件。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stylish Container Example'),
        ),
        body: Center(
          child: StylishContainer(
            width: 200,
            height: 200,
            borderRadius: 20,
            backgroundColor: Colors.blue,
            shadowColor: Colors.black,
            shadowOffset: Offset(4, 4),
            shadowBlurRadius: 10,
            child: Center(
              child: Text(
                'Hello, Stylish Container!',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

参数说明

StylishContainer 提供了多个参数来定制容器的样式：

  • width 和 height: 设置容器的宽度和高度。
  • borderRadius: 设置容器的圆角半径。
  • backgroundColor: 设置容器的背景颜色。
  • shadowColor: 设置容器的阴影颜色。
  • shadowOffset: 设置阴影的偏移量。
  • shadowBlurRadius: 设置阴影的模糊半径。
  • child: 容器内的子组件。

自定义样式

你可以根据需要调整这些参数来创建不同风格的容器。例如，你可以创建一个带有圆角和阴影的容器，或者一个带有渐变背景的容器。

StylishContainer(
  width: 250,
  height: 250,
  borderRadius: 30,
  backgroundColor: Colors.purple,
  shadowColor: Colors.deepPurple,
  shadowOffset: Offset(6, 6),
  shadowBlurRadius: 15,
  child: Center(
    child: Text(
      'Custom Stylish Container',
      style: TextStyle(color: Colors.white, fontSize: 20),
    ),
  ),
)
回到顶部