How to create a line with no gradient at the edges? - flutter

Question

I want to create a line without any shadow and gradient.
I try to create a simple Container with color, as below:
https://dartpad.dev/?id=72468c06f2cab2d4025c0842828f3907
return Container(
height: 200,
width: 100,
color: Colors.white,
child: Center(
child: Container(
height: 3,
color: Colors.red,
),
),
);
But I got the result as this:
After zooming in, we see that it contains a gradient to the background color：
What should I do to create a completely pure line, without any shadows or gradients?
I've tried the clipBehavior property and all 4 values have the same result.

Answer 1

you can use container's clipBehavior property to achieve this as described in this official documentation.
https://api.flutter.dev/flutter/dart-ui/Clip.html
you can use following properties.
hardEdge, which is a little faster, but with lower fidelity.
antiAliasWithSaveLayer, which is much slower, but can avoid the
bleeding edges if there's no other way.
Paint.isAntiAlias, which is the anti-aliasing switch for general draw operations.
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: const Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
const MyWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 200,
width: 100,
color: Colors.white,
child: Center(
child: Container(
clipBehavior: Clip.hardEdge, //<-- this property
height: 3,
decoration: BoxDecoration(
color: Colors.red,
),
),
),
);
}
}
Output:
working: https://ibb.co/PZR1XkF