我想在 flutter 中设计这样的网格：

Question

我想在 flutter 中设计一个类似下面输出的网格。请帮忙解决这个问题。

我试过的代码是这样的：

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),
              ),
            ),
          ),
       ),
   ),

我得到的输出是这样的：

在此先感谢您的帮助。

Answer 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 的子项以实现您喜欢的设计。

Answer 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,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),

这是输出。

我想在 flutter 中设计这样的网格：

I want to design grid like this in flutter:

user-interface

flutter

flutter-layout