我正在尝试实现一个Flutter UI，其外观与此图像相似；
我想创建如下内容，但是无法正确划分。希望大家帮助。
final colorEnvelope = Color(0xff444444);
Widget getSellWidget(Sell product, {double width = 180}) {
final Color borderColor = Colors.blueGrey.shade900;
final BorderStyle borderStyle = BorderStyle.solid;
return Container(
width: width,
height: productContainerHeight,
margin: EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
//padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: ShapeDecoration(
shape: CustomShapeBorder(),
/*border: Border(
top: BorderSide(color: borderColor)
color: borderColor,
),*/
color: Colors.white,
),
margin: const EdgeInsets.all(20.0),
child:
Stack(children: <Widget>[
Positioned(
right: 0,
top: 0,
child: CustomPaint(
size: Size(20,20),
painter: MyTri()),
),
Padding(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(height: 10),
Image.network(
"https://flutter.dev/assets/flutter-lockup-c13da9c9303e26b8d5fc208d2a1fa20c1ef47eb021ecadf27046dea04c0cebf6.png",
fit: BoxFit.fitHeight,
),
SizedBox(height: 10),
Text("Living a hectic life"),
]),),]), // stack
),
Container(
alignment: Alignment.topCenter,
margin: const EdgeInsets.all(10.0),
child:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Living a hectic life"),
Text("Living a hectic life"),
Text("Living a hectic life"),
]),
Icon(Icons.photo),
]),
),
]),
);
}
MyTri类扩展了CustomPainter {}
CustomShapeBorder类扩展ShapeBorder {}
使用小部件时，出现此错误。
最佳答案
此代码将为您提供类似于以下内容的开头:
import 'package:flutter/material.dart';
final colorEnvelope = Color(0xff444444);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Sell(),
),
),
);
}
}
class Sell extends StatelessWidget {
final Color borderColor = Colors.blueGrey.shade400;
final BorderStyle borderStyle = BorderStyle.solid;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('border: Border')),
body: Center(
child: Container(
width: 180,
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: borderColor,
style: borderStyle,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
//padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: ShapeDecoration(
shape: CustomShapeBorder(),
/*border: Border(
top: BorderSide(color: borderColor)
color: borderColor,
),*/
color: Colors.white,
),
margin: const EdgeInsets.all(20.0),
child:
Stack(children: <Widget>[
Positioned(
right: 0,
top: 0,
child: CustomPaint(
size: Size(20,20),
painter: MyTri()),
),
Padding(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(height: 10),
Image.network(
"https://flutter.dev/assets/flutter-lockup-c13da9c9303e26b8d5fc208d2a1fa20c1ef47eb021ecadf27046dea04c0cebf6.png",
fit: BoxFit.fitHeight,
),
SizedBox(height: 10),
Text("Living a hectic life"),
]),),]), // stack
),
Container(
alignment: Alignment.topCenter,
margin: const EdgeInsets.all(10.0),
child:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Living a hectic life"),
Text("Living a hectic life"),
Text("Living a hectic life"),
]),
Icon(Icons.photo),
]),),
Container(
padding: EdgeInsets.all(20),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: borderColor,
style: borderStyle,
),
),
),
child: Text("11:11:11"),
),
]),
),
),
);
}
}
class MyTri extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Path path = Path();
path.moveTo(size.width-20, 0);
path.lineTo(size.width-20, 20);
path.lineTo(size.width, 20);
path.close();
canvas.drawPath(path, Paint()..color = colorEnvelope);
}
@override
bool shouldRepaint(MyTri mytri) => true;
}
class CustomShapeBorder extends ShapeBorder {
const CustomShapeBorder();
@override
Path getInnerPath(Rect rect, {TextDirection textDirection}) => _getPath(rect);
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) => _getPath(rect);
_getPath(Rect rect) {
return Path()
..moveTo(rect.topLeft.dx, rect.topLeft.dy)
..lineTo(rect.bottomLeft.dx, rect.bottomLeft.dy)
..lineTo(rect.bottomRight.dx, rect.bottomRight.dy)
..lineTo(rect.topRight.dx, rect.topRight.dy + 20)
..lineTo(rect.topRight.dx - 20, rect.topRight.dy)
..close();
}
@override
EdgeInsetsGeometry get dimensions {
return EdgeInsets.all(0);
}
@override
ShapeBorder scale(double t) {
return CustomShapeBorder();
}
@override
void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
Path path = Path()
..moveTo(rect.topLeft.dx, rect.topLeft.dy)
..lineTo(rect.bottomLeft.dx, rect.bottomLeft.dy)
..lineTo(rect.bottomRight.dx, rect.bottomRight.dy)
..lineTo(rect.topRight.dx, rect.topRight.dy + 20)
..lineTo(rect.topRight.dx - 20, rect.topRight.dy)
..close();
canvas.drawPath(path, Paint()..color = colorEnvelope..style = PaintingStyle.stroke);
}
}