Flutter Web：如何实现带角度的白绿分隔背景？

Hey there! I get it—nailing that precise angled split background can feel tricky. Let's break down what's going on with your current code and tweak it (or use a more tailored approach) to get the exact effect you want.

What's Off with Your Current Gradient? #

Your existing LinearGradient uses three colors with stops at [0, 0.5, 0.5] to create a hard split, but the begin and end alignment (Alignment(0, -1) to Alignment(1, 1)) might not be giving you the specific angle you're aiming for. Let's fix that.

Solution 1: Tweak the LinearGradient (Simple & Fast) #

If you just need a clean, straightforward angled split, adjust the gradient's alignment or use GradientRotation to set an exact angle.

Option A: Adjust Alignment for a Specific Slant

Define the split direction using begin and end to match your design. For example, a split from top-left to bottom-right:

Widget body(context) {
  return Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [
          Colors.white,
          Color(0xff00a78e),
        ],
        stops: [0.5, 0.5], // Hard split with no transition
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
      // Add other box decoration properties here
    ),
    // Your child widgets go here
  );
}

Option B: Exact Angle with GradientRotation

If you need a precise degree (like 30 degrees), use GradientRotation (don't forget to import dart:math):

import 'dart:math';

Widget body(context) {
  return Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.white, Color(0xff00a78e)],
        stops: [0.5, 0.5],
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        transform: GradientRotation(math.pi / 6), // 30 degrees (converted to radians)
      ),
    ),
  );
}

Solution 2: CustomPaint for Full Control #

If you need a more complex split (e.g., the line doesn't span corner-to-corner), use CustomPaint to draw the exact shape you want.

First, create a custom painter:

class AngledSplitBackground extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final whitePaint = Paint()..color = Colors.white;
    final greenPaint = Paint()..color = Color(0xff00a78e);

    // Draw full white background first
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), whitePaint);

    // Draw green section with a custom path
    final greenPath = Path();
    // Adjust these points to tweak the angle/position of the split
    greenPath.moveTo(size.width * 0.4, 0); // Start at 40% of the top edge
    greenPath.lineTo(size.width, size.height); // Go to bottom-right corner
    greenPath.lineTo(0, size.height); // Go to bottom-left corner
    greenPath.close(); // Close the path to fill the area

    canvas.drawPath(greenPath, greenPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Then use it in your widget:

Widget body(context) {
  return Container(
    child: CustomPaint(
      painter: AngledSplitBackground(),
      child: // Your content widgets here (they'll sit on top of the background)
    ),
  );
}

This lets you fine-tune the split line's start/end points to match your exact design.

内容的提问来源于stack exchange，提问作者Triple K