Flutter边框样式插件r_border的使用

简介

r_border 是一个用于扩展 Flutter 中 BoxDecoration 的插件，支持渐变边框、虚线边框以及其他自定义边框样式。通过该插件，您可以轻松地为您的应用界面添加丰富的边框效果。

如何使用？

安装插件

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

dependencies:
  r_border: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

示例代码

以下是一个完整的示例代码，展示了如何使用 r_border 插件来设置不同方向的渐变边框：

import 'package:flutter/material.dart';
import 'package:r_border/border_side/r_gradient_line_border_side.dart';
import 'package:r_border/r_border.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 r_border 设置边框
            Container(
              decoration: const BoxDecoration(
                border: RBorder(
                  top: RGradientLineBorderSide( // 上边框
                    width: 2,
                    gradient: LinearGradient(
                      colors: [Colors.black, Colors.red],
                    ),
                  ),
                  right: RGradientLineBorderSide( // 右边框
                    width: 2,
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Colors.red, Colors.green],
                    ),
                  ),
                  bottom: RGradientLineBorderSide( // 下边框
                    width: 2,
                    gradient: LinearGradient(
                      begin: Alignment.centerRight,
                      end: Alignment.centerLeft,
                      colors: [Colors.green, Colors.blue],
                    ),
                  ),
                  left: RGradientLineBorderSide( // 左边框
                    width: 2,
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Colors.black, Colors.blue],
                    ),
                  ),
                ),
              ),
              child: const Text('You have pushed the button this many times:'),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

效果展示

运行上述代码后，您将看到一个带有渐变边框的容器，效果如下图所示：

许可证

此插件遵循 Apache License 2.0 开源协议，具体内容如下：

Copyright 2021 The r_upgrade_ui Project Authors

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.