[英]How to create this type of border in flutter
I want to create this type of border inside GrideView but didn't succeed - help please.我想在 GrideView 中创建这种类型的边框但没有成功 - 请帮助。
And I also want to scroll the arrow but it is stuck:我也想滚动箭头,但它卡住了:
But what I created here:但是我在这里创建的:
Code:代码:
Padding(
padding: const EdgeInsets.only(left: 16, right: 16),
child: Container(
decoration: ShapeDecoration(
color: Color.fromRGBO(247, 247, 247, 1),
shape: MessageBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
bottomLeft: Radius.circular(8),
bottomRight: Radius.circular(8)),
usePadding: false
),
shadows: [
BoxShadow(color: Colors.black, ),
],
),
child: GridView.builder(
itemCount: subServices.length,
// The length Of the array
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCountAndFixedHeight(
crossAxisCount: 4,
crossAxisSpacing: 3,
mainAxisSpacing: 3,
height: 92.7, //48 dp of height
),
itemBuilder: (context, index) =>
Container(
decoration: myBoxDecoration(
index, 4),
child: Category(data: subServices[index]),
),
),
),
)
this is the idea, but may not be the best, stack a white bordered container on the gridview:这是一个想法,但可能不是最好的,在 gridview 上堆叠一个白色边框的容器:
Stack(
alignment:Alignment.center,
children:[
/* your gridview */
IgnorePointer(
ignoring: true,
child: Container(
width: /* width of stack - 10 */
height: /* height of stack - 10 */
color: Colors.transparent,
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 10.0,
),
),
),
),
],
),
this pseudo code might help you.这个伪代码可能会对你有所帮助。
WhiteContainer(
child: Stack [
gray container with padding 1,
grid view in which every tile has padding 1
])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.