Flutter圆形背景插件circles_background的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter圆形背景插件circles_background的使用

插件介绍

circles_background 是一个简单的背景设计包，旨在使您的应用看起来更美观。它提供了两个类来创建漂亮的背景设计。

  1. ThreeCirclesBackground：这个类允许您使用默认的圆形背景设计。您可以使用参数 gradientColor 进行自定义。gradientColor 可以设置为 GradientColor.blue、GradientColor.red 或 GradientColor.custom。如果选择自定义，则还需要提供参数 colors，这些颜色用于圆圈渐变。每个列表至少需要包含两种颜色。

  2. CirclesBackground：这个类只需要一个参数 circles。您需要提供一个 CircleInfo 类型的列表，该类包含大小、颜色、旋转角度、对齐方式和边角半径等信息。

示例代码

import 'package:flutter/material.dart';
import 'package:circles_background/circle_background.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Circles Background',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: CirclesBackgroundPage(),
      //home: const ThreeCirclesBackgroundPage(GradientColor.blue),
      //home: const ThreeCirclesBackgroundPage(GradientColor.red),
      //home: const ThreeCirclesBackgroundPage(GradientColor.custom),
    );
  }
}

class CirclesBackgroundPage extends StatelessWidget {
  final List<CircleInfo> circles = [
    CircleInfo(
      size: const Size(300, 500),
      color: Colors.green,
      borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(2)),
      alignment: Alignment.topRight,
    ),
    CircleInfo(
      size: const Size(300, 900),
      gradient: LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.green[800]!, Colors.green]),
      borderRadius: const BorderRadius.only(),
      alignment: Alignment.topLeft,
    ),
    CircleInfo(
      size: const Size(200, 500),
      gradient: LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.green[800]!, Colors.green]),
      borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(50), topLeft: Radius.circular(150)),
      alignment: Alignment.bottomRight,
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: CirclesBackground(
        circles: circles,
        child: const Padding(
          padding: EdgeInsets.symmetric(vertical: 70, horizontal: 2),
          child: Text('Hello word!', style: TextStyle(color: Colors.white, fontSize: 40)),
        ),
      ),
    );
  }
}

使用说明

  1. 导入插件：

    import 'package:circles_background/circle_background.dart';

  2. 使用示例：

class CirclesBackgroundPage extends StatelessWidget {
  final List<CircleInfo> circles = [
    CircleInfo(
      size: const Size(300, 500),
      color: Colors.green,
      borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(200)),
      alignment: Alignment.topRight,
    ),
    CircleInfo(
      size: const Size(300, 900),
      gradient: LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.green[800]!, Colors.green]),
      borderRadius: const BorderRadius.only(),
      alignment: Alignment.topLeft,
    ),
    CircleInfo(
      size: const Size(200, 500),
      gradient: LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.green[800]!, Colors.green]),
      borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(50), topLeft: Radius.circular(150)),
      alignment: Alignment.bottomRight,
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: CirclesBackground(
        circles: circles,
        child: const Padding(
          padding: EdgeInsets.symmetric(vertical: 70, horizontal: 2),
          child: Text('Hello word!', style: TextStyle(color: Colors.white, fontSize: 40)),
        ),
      ),
    );
  }
}

其他示例

class ThreeCirclesBackgroundPage extends StatelessWidget {
  final GradientColor gradientColor;
  const ThreeCirclesBackgroundPage(this.gradientColor, {Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: ThreeCirclesBackground(
        gradientColor: gradientColor,
        customColors: getCustomColors(),
        sizeOfScreen: MediaQuery.of(context).size,
        child: const Padding(
          padding: EdgeInsets.symmetric(vertical: 70, horizontal: 2),
          child: Text('Hello word!', style: TextStyle(color: Colors.white, fontSize: 40)),
        ),
      ),
    );
  }

  List<List<Color>>? getCustomColors() {
    if (gradientColor == GradientColor.custom {
      return [
        [Colors.pink[700]!, Colors.pink[900]!],
        [Colors.pink[700]!, Colors.pink[900]!],
        [Colors.pink[700]!, Colors.pink[900]!],
      ];
    }
  }
}

完整代码

import 'package:flutter/material.dart';
import 'package:circles_background/circle_background.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Circles Background',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: CirclesBackgroundPage(),
      //home: const ThreeCirclesBackgroundPage(GradientColor.blue),
      //home: const ThreeCirclesBackgroundPage(GradientColor.red),
      //home: const ThreeCirclesBackgroundPage(GradientColor.custom),
    );
  }
}

class CirclesBackgroundPage extends StatelessWidget {
  final List<CircleInfo> circles = [
    CircleInfo(
      size: const Size(300, 500),
      color: Colors.green,
      borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(2)),
      alignment: Alignment.topRight,
    ),
    CircleInfo(
      size: const Size(300, 900),
      gradient: LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.green[800]!, Colors.green]),
      borderRadius: const BorderRadius.only(),
      alignment: Alignment.topLeft,
    ),
    CircleInfo(
      size: const Size(200, 500),
      gradient: LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.green[800]!, Colors.green]),
      borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(50), topLeft: Radius.circular(150)),
      alignment: Alignment.bottomRight,
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: CirclesBackground(
        circles: circles,
        child: const Padding(
          padding: EdgeInsets.symmetric(vertical: 70, horizontal: 2),
          child: Text('Hello word!', style: TextStyle(color: Colors.white, fontSize: 40)),
        ),
      ),
    );
  }
}

更多关于Flutter圆形背景插件circles_background的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter圆形背景插件circles_background的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter中circles_background插件的使用，这里是一个简单的代码示例，展示如何在Flutter应用中应用圆形背景。

首先，确保你的pubspec.yaml文件中已经添加了circles_background依赖：

dependencies:
  flutter:
    sdk: flutter
  circles_background: ^x.y.z  # 请将x.y.z替换为最新版本号

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

接下来，在你的Dart文件中使用CirclesBackground。以下是一个完整的示例，展示如何将CirclesBackground用作应用的主背景：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CirclesBackground(
          // 设置背景颜色
          color: Colors.white,
          // 设置圆圈的大小和数量
          size: 100.0,
          count: 3,
          // 设置圆圈的透明度
          opacity: 0.4,
          // 设置圆圈的颜色
          circleColors: [
            Colors.blue.withOpacity(0.3),
            Colors.red.withOpacity(0.3),
            Colors.green.withOpacity(0.3),
          ],
          // 设置圆圈的起始位置
          startPosition: Alignment.topLeft,
          // 设置圆圈的动画速度
          speed: 2.0,
          // 设置是否重复动画
          repetitive: true,
          child: Center(
            child: Text(
              'Hello, Circles Background!',
              style: TextStyle(fontSize: 24, color: Colors.black),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，使用CirclesBackground作为背景。以下是关键属性的解释：

  • color: 设置背景颜色。
  • size: 设置每个圆圈的大小。
  • count: 设置圆圈的数量。
  • opacity: 设置圆圈的透明度。
  • circleColors: 一个颜色列表，用于指定每个圆圈的颜色。
  • startPosition: 设置圆圈的起始位置。
  • speed: 设置圆圈的动画速度。
  • repetitive: 设置是否重复动画。
  • child: CirclesBackground的子组件，即显示在背景之上的内容。

你可以根据需要调整这些属性来实现不同的视觉效果。希望这个示例对你有所帮助！

回到顶部