鋭い端/グラデーションライン/をフラッターで描く方法は?
Aug 20 2020
ストローク法を使用して、フラッターで鋭い端を持つグラデーションラインを作成するにはどうすればよいですか?以下のようにフラッターで線を引きたいです。

回答
4 sleepingkit Aug 20 2020 at 09:46
CustomPainterを使用して描画します。
import 'package:flutter/material.dart';
void main() => runApp(Example());
class Example extends StatefulWidget {
@override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: CustomPaint(
size: Size(200, 5),
painter: CurvePainter(),
),
)));
}
@override
void dispose() {
super.dispose();
}
}
class CurvePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = Colors.black;
paint.style = PaintingStyle.fill; // Change this to fill
var path = Path();
path.moveTo(0, 0);
path.quadraticBezierTo(size.width / 2, size.height / 2, size.width, 0);
path.quadraticBezierTo(size.width / 2, -size.height / 2, 0, 0);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
jack Aug 20 2020 at 09:18
画像が表示されません。CustomPaintウィジェットを使用して線を描画し、CustomPainterを拡張するクラスを定義し、canvas.drawLine()メソッドを使用できます。
AbubakrElghazawy Aug 20 2020 at 12:19

仕切りクラス
両側にパディングがある細い水平線。
マテリアルデザイン言語では、これは仕切りを表します。仕切りは、リスト、引き出し、その他の場所でコンテンツを区切るために使用できます。
ListTileアイテム間に仕切りを作成するには、この場合に最適化されたListTile.divideTilesの使用を検討してください。
ボックスの全高は高さによって制御されます。適切なパディングは、高さから自動的に計算されます。
[
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: MyStatelessWidget(),
),
);
}
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>\[
Expanded(
child: Container(
color: Colors.amber,
child: const Center(
child: Text('Above'),
),
),
),
const Divider(
color: Colors.black,
height: 20,
thickness: 5,
indent: 20,
endIndent: 0,
),
Expanded(
child: Container(
color: Colors.blue,
child: const Center(
child: Text('Below'),
),
),
),
\],
),
);
}
}]
ここにスタイルを変更する方法の情報ここにリンクの説明を入力してください