这是我的密码

• 这是我使用网格视图小部件的主页的代码。我声明了一个列表，其中指定了名称，图标路径和布尔值。项目生成器连接到不同页面的代码，并在此代码下方给出 *

import 'package:flutter/material.dart';
import '../util/service_box.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final double horizontalPadding = 25;
  final double verticalPadding = 25;

  // list of services
  List services = [
    ["Background\nRemover", "assets/background_remove.png", true],
    ["QR\nGenerator", "assets/qr.png", false],
    ["Scanner", "assets/scanner.png", false],
    ["Calculator", "assets/calculator.png", true],
    ["Text to\nSpeech", "assets/tts.png", false],
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[300],
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.symmetric(
                  horizontal: horizontalPadding, vertical: verticalPadding),
              child: IconButton(
                iconSize: 50,
                icon: const Icon(
                  Icons.tips_and_updates,
                ),
                onPressed: () {},
              ),
            ),
            const SizedBox(height: 20),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("Welcome to",
                    style: TextStyle(fontSize: 15, color: Colors.grey[700]),
                  ),
                  const Text(
                    "APPY TOOLBOX",
                    style: TextStyle(
                      fontSize: 37,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 25),

            Padding(
                padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
              child: Divider(
                color: Colors.grey[500],
                thickness: 1,
              ),
            ),

            Padding(
              padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
              child: const Text('Services'),
            ),
            Expanded(
                child: GridView.builder(
                  itemCount: services.length,
                    padding: const EdgeInsets.all(10.0),
                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      childAspectRatio: 1/1.3,
                    ),
                    itemBuilder: (context, index) {
                      return ServiceBox(
                        serviceName: services[index][0],
                        iconPath: services[index][1],
                        color: services[index][2],
                      );
                    },
                )),
          ],
        ),
      ),
    );
  }
}

• 现在，这里是包含项目构建器的页面。在这里，我使用我创建的列表为容器创建了一个新的UI ...*

import 'package:flutter/material.dart';

class ServiceBox extends StatelessWidget {
  final String serviceName;
  final String iconPath;
  final bool color;

  ServiceBox(
      {Key? key,
      required this.serviceName,
      required this.iconPath,
      required this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(15.0),
      child: Container(
        decoration: BoxDecoration(
          color: color ? Colors.grey[900] : Colors.grey[200],
          borderRadius: BorderRadius.circular(24),
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 25.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Image.asset(iconPath, height: 50, color: color ? Colors.white : Colors.black,),
              Row(
                children: [
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 20.0, right: 20.0),
                      child: Text(
                        serviceName,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 17,
                          color: color ? Colors.white : Colors.black,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

**我想要的是：**为这些容器添加onTap功能，这样当点击它们时，每个容器都会导航到不同的页面。