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
相关产品推荐
相关产品推荐

