如何在整个 GridView 中应用渐变颜色答案

【问题标题】：How to apply gradient color across entire GridView如何在整个 GridView 中应用渐变颜色
【发布时间】：2022-01-20 14:31:05
【问题描述】：

这是我希望生成的 gridview 的样子：

有没有办法在容器的整个网格视图中自动应用它？

【问题讨论】：

我认为它是使用渐变叠加，它的用例是什么？只显示这个视图？
是的，我想用 0-9 位数制作网格，就像在拨号器中一样。图片有更多的容器，但它是我能找到的与网格视图相关的最接近的容器
您可以寻找 CustomPaint 或 clipPath

标签： flutter dart gridview

【解决方案1】：

检查一下：


const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          child: GridView.count(
            crossAxisCount: 4,
            children: List.generate(
              40,
              (index) {
                return Container(
                  padding: const EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.white),
                  ),
                );
              },
            ),
          ),
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Colors.lightBlue,
                Colors.blue,
                Colors.pink,
              ],
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：

这只会将渐变应用到背景容器，而不是实际的gridview