You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter注册成功跳转list.dart页面显示空白屏问题排查求助

问题原因
  • 跳转目标AllPlants组件返回的MaterialApp未配置home参数,你编写的列表逻辑所在的MyHomePage组件未被挂载到渲染树中,所以显示空白。
  • 额外嵌套了MaterialApp,项目顶层的main.dart中已经存在一个全局MaterialApp,重复嵌套会导致路由、主题等配置冲突,属于冗余逻辑。
解决方法

修改list.dart代码,删掉冗余的main函数和多余的MaterialApp,直接将列表逻辑集成到AllPlants组件中,修改后的代码如下:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:weplant/entities/plant.dart';
import 'package:line_awesome_flutter/line_awesome_flutter.dart';
import 'package:weplant/detail_plant.dart';
import 'package:google_fonts/google_fonts.dart';

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

  @override
  State<AllPlants> createState() => _AllPlantsState();
}

class _AllPlantsState extends State<AllPlants> {
  final List<Plant> _plants = <Plant>[];

  Future fetchPlants() async {
    var url = 'https://weplant.zanhrastnik.com/plants/';
    var response = await http.get(Uri.parse(url));
    var plants = <Plant>[];
    if (response.statusCode == 200){
      var plantsJson = jsonDecode(response.body);
      for (var plantJson in plantsJson){
        plants.add(Plant.fromJson(plantJson));
      }
    }
    return plants;
  }

  @override
  void initState() {
    fetchPlants().then((value) {
      setState(() {
        _plants.addAll(value);
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const Icon(
            LineAwesomeIcons.bars,
            color: Color.fromRGBO(254, 255, 238, 1.0)
        ),
        title: Image.asset(
          'assets/weplant_logo.png',
          height: 50,
        ),
        centerTitle: true,
        actions: const [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: Icon(
                LineAwesomeIcons.search,
                color: Color.fromRGBO(254, 255, 238, 1.0)
            ),
          ),
        ],
        backgroundColor: const Color.fromRGBO(156, 175, 136, 1.0),
      ),
      body: Padding(
          child: ListView.builder(
            itemBuilder: (context, index) {
              return Card(
                  color: const Color.fromRGBO(254, 255, 238, 1.0),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16),
                      side: const BorderSide(color: Color.fromRGBO(230, 227, 211, 1.0), width: 1)
                  ),
                  child: Padding(
                    padding: const EdgeInsets.only(top: 8.0, bottom: 8.0, left:4.0, right: 4.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        ListTile(
                          leading: ClipRRect(
                            borderRadius: BorderRadius.circular(8.0),
                            child: Image.network(
                              _plants[index].pImage,
                              width: 50,
                            ),
                          ),
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                          trailing: const Icon(
                            LineAwesomeIcons.angle_right,
                            color: Color.fromRGBO(156, 175, 136, 1.0),
                          ),
                          title: Text(
                            _plants[index].pName,
                          ),
                          subtitle: Text(
                              _plants[index].pLatinName
                          ),
                          onTap: () {
                            Navigator.push(
                                context, MaterialPageRoute(builder: (context) => DetailPage(plant: _plants[index],)));
                          },
                        ),
                      ],
                    ),
                  ));
            },
            itemCount: _plants.length,
          ),
          padding: const EdgeInsets.only(top:4.0)
      ),
    );
  }
}

如果你不想调整原有结构,也可以直接在原AllPlants返回的MaterialApp中添加home参数指定为MyHomePage:

class AllPlants extends StatelessWidget {
  const AllPlants({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WePlant',
      theme: ThemeData(
          textTheme: GoogleFonts.robotoTextTheme(
            Theme.of(context).textTheme,
          ),
          scaffoldBackgroundColor: const Color(0xFFFEFFEE)
      ),
      // 新增这一行指定首页
      home: const MyHomePage(title: 'WePlant'),
    );
  }
}
额外注意

你注册请求时传参的字段是email,但输入框的提示文字是Username,请确认后端接收的参数是否匹配,避免注册请求失败未触发跳转逻辑。

内容的提问来源于stack exchange,提问作者Zan Hrastnik

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.28 21:36:07