How can I make a line that "goes down", like this:

CodePudding user response：

Try below code:

  Row(
          children: [
            Expanded(
              flex: 2,
              child: Container(
                height: 0.7,
                decoration: BoxDecoration(
                  color: Colors.grey,
                  gradient: LinearGradient(
                    colors: [
                      Colors.green,
                      Colors.green.shade50,
                    ],
                    begin: Alignment.centerRight,
                    end: Alignment.centerLeft,
                  ),
                ),
              ),
            ),
            const Expanded(
              flex: 1,
              child: Align(
                alignment: Alignment.center,
                child: Text(
                  'Or',
                ),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                height: 0.7,
                decoration: BoxDecoration(
                  color: Colors.grey,
                  gradient: LinearGradient(
                    colors: [
                      Colors.green,
                      Colors.green.shade50,
                    ],
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                  ),
                ),
              ),
            ),
          ],
        ),

Result->

CodePudding user response：

Using LinearGradient and setting up with different opacity of colors.

class MyWidget extends StatelessWidget {
  
  final Color green = Colors.green;
  
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      width: 300,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            green,
            green.withOpacity(0.75),
            green.withOpacity(0.50),
            green.withOpacity(0.25),
            green.withOpacity(0.0),
          ],
        ),
      ),
    );
  }
}