Flutter中_DropdownButtonExampleState缺失build方法的问题及解决

错误原因 #

1. 类嵌套结构混乱：你将IDRoute类直接嵌套在_DropdownButtonExampleState类内部，导致_DropdownButtonExampleState这个State子类缺失了必须重写的build方法——所有State子类都必须实现build方法来返回对应Widget，这是Flutter的强制规则。
2. 变量作用域冲突：定义在_DropdownButtonExampleState里的dropdownValue，在嵌套的IDRoute中无法正确访问，因为IDRoute是独立的StatelessWidget，不能直接读取另一个State类的成员变量。

解决步骤 #

步骤1：拆分嵌套类，调整结构 #

把IDRoute从_DropdownButtonExampleState内部移出，让它成为独立的类。如果需要在IDRoute中使用下拉选择器，可将下拉选择器封装成独立组件，再作为子组件引入IDRoute。

步骤2：补全State类的build方法 #

给_DropdownButtonExampleState添加build方法，返回下拉选择器的Widget，满足State类的强制要求。

修正后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:convert';
import 'dart:io';

import '/FirstRoute.dart';

const List<String> list = <String>['One', 'Two', 'Three', 'Four'];

// 独立封装的下拉选择器组件
class DropdownButtonExample extends StatefulWidget {
  const DropdownButtonExample({super.key});

  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  String dropdownValue = list.first;

  // 必须实现的build方法
  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      icon: const Icon(Icons.arrow_downward),
      elevation: 16,
      style: const TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String? value) {
        setState(() {
          dropdownValue = value!;
        });
      },
      items: list.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

// 独立的页面组件
class IDRoute extends StatelessWidget {
  const IDRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          centerTitle: true,
          backgroundColor: Colors.black,
          systemOverlayStyle:
          const SystemUiOverlayStyle(statusBarColor: Colors.black),
          leading: IconButton(
            icon: Image.asset('assets/logo.png'),
            onPressed: null,
          ),
          title: Text("Welcome my app",
              style: const TextStyle(color: Colors.white),
              textAlign: TextAlign.center)
      ),
      body: Center(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("YourID",
                  style: TextStyle(
                      fontSize: 50.0,
                      fontWeight: FontWeight.w300,
                      color: Color(0XFF3F3D56),
                      height: 2.0)),
              const Text("Please enter your ID.",
                style: TextStyle(
                    color: Colors.grey,
                    letterSpacing: 1.2,
                    fontSize: 16.0,
                    height: 1.3),
                textAlign: TextAlign.center,
              ),
              // 引入下拉选择器组件
              const DropdownButtonExample(),
              const SizedBox(height: 20),
              ElevatedButton(
                child: const Text('Open route'),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const FirstRoute()),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

额外说明 #

• 修正后的代码将下拉选择器封装为独立组件，方便后续在其他页面复用。
• 在IDRoute的Column中添加了mainAxisAlignment: MainAxisAlignment.center和SizedBox，优化了页面布局的合理性。

内容的提问来源于stack exchange，提问作者Test