GenerateCode

Introduction

Are you working on a Flutter app and struggling to replicate a Figma design featuring an angular (conic) gradient border? You’re not alone! Creating stylish, gradient borders can be challenging in Flutter due to the lack of native support for conic gradients. This article will walk you through why this issue occurs and provide a detailed solution to help you achieve that beautiful design.

Why Doesn't Flutter Support Conic Gradients Natively?

Flutter's BoxDecoration supports various types of gradients, such as LinearGradient and RadialGradient, but unfortunately, it lacks direct support for ConicGradient. This limitation means you cannot achieve the exact gradient effect shown in Figma natively. Instead, developers often have to rely on workarounds or additional packages to mimic this effect.

Step-by-Step Solution to Create a Conic Gradient Border

To create a conic gradient border in Flutter, you can utilize the third-party package gradient_borders, which can help you in applying custom gradient styles to your container.

1. Install the Gradient Borders Package

First, make sure to include the gradient_borders package in your pubspec.yaml file. You can install it using:

dependencies: gradient_borders: ^1.0.0 

After adding it, run flutter pub get to install the new dependency.

2. Create the FrostedConicBox Class

Next, we will build a FrostedConicBox widget that incorporates both the gradient border and a blurred background.

Here’s the revised version of your current code to incorporate an angular gradient:

import 'dart:math' as math; import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:gradient_borders/gradient_borders.dart'; import 'package:luma_active/core/responsive.dart'; class FrostedConicBox extends StatelessWidget { final String imagePath; final String label; const FrostedConicBox({super.key, required this.imagePath, required this.label}); @override Widget build(BuildContext context) { return ClipRRect( borderRadius: BorderRadius.circular(16), child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), child: Container( width: ResponsiveHelper.wp(context, 176), height: ResponsiveHelper.hp(context, 65), padding: const EdgeInsets.symmetric(horizontal: 12), decoration: BoxDecoration( color: Colors.white.withOpacity(0.1), borderRadius: BorderRadius.circular(16), border: GradientBoxBorder( width: 1, gradient: SweepGradient( center: Alignment.center, startAngle: 0, endAngle: 2 * math.pi, tileMode: TileMode.clamp, colors: [ Colors.white.withOpacity(1.0), // Solid part Colors.white.withOpacity(0.0), // Transparent part Colors.white.withOpacity(1.0), // Repeat effect Colors.white.withOpacity(0.0), Colors.white.withOpacity(1.0), ], stops: const [ 0.14, 0.40, 0.65, 0.90, 1.0, ], ), ), ), child: Row( children: [ ClipRRect( borderRadius: BorderRadius.circular(8), child: Image.asset( imagePath, width: 45, height: 45, fit: BoxFit.cover, ), ), const SizedBox(width: 10), Expanded( child: Text( label, style: const TextStyle( color: Colors.white, fontWeight: FontWeight.w600, fontSize: 15, ), overflow: TextOverflow.ellipsis, ), ), ], ), ), ), ); } } 

3. Explanation of the Code

In this example, we used ClipRRect to create rounded corners for our container. The BackdropFilter applies a blur effect, creating that frosted glass look you want. Inside the BoxDecoration, we applied a GradientBoxBorder with a SweepGradient that mimics the angular effect using specified stops for color transitions.

4. Adjusting for Responsiveness

Using the ResponsiveHelper function ensures your dimensions adapt to different screen sizes, which is essential for modern app design. This helps in maintaining consistency across various devices.

Frequently Asked Questions (FAQ)

Q1: Why use SweepGradient?

A: SweepGradient allows for a circular gradient, making it a suitable choice for replicating conic effects present in a Figma design. It creates a seamless transition between colors.

Q2: Can I customize the angle of the gradient?

A: Yes! Adjust the startAngle and endAngle properties in the SweepGradient to tailor the gradient's appearance to your liking.

Q3: Is it possible to achieve this without a third-party package?

A: While it's difficult to replicate precisely, using custom painter may allow variations. However, leveraging a package like gradient_borders simplifies the process significantly.

Conclusion

By following these steps, you should now be able to replicate that stunning angular (conic) gradient border in your Flutter app. Remember, while Flutter may not support conic gradients natively, clever use of packages and Flutter's flexible widget system allows you to achieve your design vision beautifully. Happy coding!