我想在颤动中设计这样的网格：答案

【问题标题】：I want to design grid like this in flutter:我想在颤动中设计这样的网格：
【发布时间】：2022-01-21 09:04:14
【问题描述】：

我想设计一个像下面输出的网格。请帮助解决这个问题。

我试过的代码是这样的：

Container(
           height: 100,
           width: 170,
           margin: const EdgeInsets.symmetric(horizontal: 30),
           child: DecoratedBox(
           decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.white,
              ),
              child: Container(
              decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.black
              ),
              margin: const EdgeInsets.all(1.5),
              child: const Center(
              child: Text(
              "data",
              style: TextStyle(color: Colors.white),
              ),
            ),
          ),
       ),
   ),

我得到的输出是这样的：

提前感谢您的帮助。

【问题讨论】：

你能把到目前为止你尝试过的内容包括在内吗？
我在问题中添加了它。
如下评论，你想要渐变边框吗？
是的，我一直在寻找它，但我尝试了一些东西，它对我有用。我在答案部分添加它。 :)

标签： flutter user-interface flutter-layout

【解决方案1】：

您可以使用 Wrap 来维护网格。

对于一长串项目来说效率不是很高，但简而言之就足够了。

看看下面的代码：（您可以使用Dartpad 运行此代码）

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: LayoutBuilder(builder: (c, box) {
            var crossCount = 2;
            var spacing = 15.0;
            var maxWidth = (box.maxWidth - ((crossCount - 1) * spacing)) / 2;
            return Wrap(
              spacing: spacing,
              runSpacing: spacing,
              children: List.generate(
                10,
                (i) => Stack(
                  children: [
                    Container(
                      width: maxWidth,
                      height: maxWidth * 0.55 * 0.5,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(topLeft: Radius.circular(16)),
                          gradient : LinearGradient(
                            end: Alignment.topLeft,
                            begin: Alignment.bottomRight,
                            colors: [
                              Colors.black,
                              Colors.black,
                              Colors.amber,
                            ],
                          ),
//                     color: Colors.white,                   
//                     boxShadow: [BoxShadow(color: Colors.black, blurRadius: 4)],
                      ),
                      
                    ),
                    Container(
                      width: maxWidth,
                        height: maxWidth * 0.55,
                        margin: const EdgeInsets.all(2),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(16),
                          color: Colors.black,
                        ),
                        
                      )
                  ],
                ),
              ),
            );
          }),
        ),
      ),
    );
  }
}

注意：用您自己的 UI 逻辑替换 Container 的子项，以实现您喜欢的设计。

【讨论】：

实际上，我不知道如何制作那种类型的边框渐变，你能帮我吗？
嘿，我已经更新了上面的代码。请再次检查。
是的，这几乎是我所需要的，但我设法构建了它。 :)

【解决方案2】：

我自己尝试过并设法构建了它。
这是代码：

Padding(
              padding: const EdgeInsets.all(10),
              child: GridTile(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      "Gate 2",
                      style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w500,
                          color: Colors.white),
                    ),
                    const Text(
                      "Unlocked",
                      style: TextStyle(
                          fontSize: 11,
                          fontWeight: FontWeight.w500,
                          color: Colors.grey),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        const Icon(
                          Icons.lock,
                          color: Colors.white,
                          size: 30,
                        ),
                        const SizedBox(width: 5),
                        Image.asset("assets/swipe.png",height: 30,width: 30,),
                        const SizedBox(width: 5),
                        // const Icon(Icons.lock, color: Colors.white,size: 30,),
                        Draggable(
                          axis: Axis.horizontal,
                          maxSimultaneousDrags: 3,

                          rootOverlay: false,
                          child: Container(
                            padding: const EdgeInsets.all(5),
                            decoration: const BoxDecoration(
                              color: Colors.white12,
                              borderRadius: BorderRadius.all(Radius.circular(100),),
                            ),
                            child: const Icon(
                              Icons.lock_open,
                              color: Colors.orangeAccent,
                              size: 30,
                            ),
                          ),
                          feedback: Container(
                            decoration: const BoxDecoration(
                              color: Colors.white12,
                              borderRadius: BorderRadius.all(Radius.circular(100),),
                            ),
                            child: const Icon(
                              Icons.lock_open,
                              color: Colors.transparent,
                              size: 40,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),

这是输出。

【讨论】：