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

Flutter TextField在真实设备中显示灰色屏幕问题求助

Flutter TextField在真实设备中显示灰色屏幕问题求助

各位Flutter开发者们,我遇到了一个棘手的问题,想请大家帮忙分析下:

在我的项目里,当在Scaffold>SafeArea>Column中使用TextField或TextFormField时,真实设备上会出现灰色屏幕的异常情况,但换成Text("ExampleString")就完全正常,而且模拟器上无论用哪种组件都没有问题。目前我的顶部导航栏TopBarAllhabitsW()显示正常,只有TextField会触发这个灰色屏幕问题,我特意把TextField放在两个黑色容器之间来更清楚地看到这个现象。

我已经尝试了不少解决方案,但都没能解决这个问题,希望大家能帮我找找原因。以下是相关的代码片段:

AllHabitsScreenC 代码

import 'package:flutter/material.dart';
import 'package:habit_tracker/widgets/all_habits/top_bar_widget.allhabits.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffeaeaf4),
      body: SafeArea(
        child: Column(
          children: [
            const TopBarAllhabitsW(),
            Container(width: 300,height: 20,color: Colors.black,),
            SizedBox(
              width: 300,
              height: 200,
              child: TextField()),
            Container(width: 300,height: 20,color: Colors.black,),
            const SizedBox(height: 20,),
          ],
        ),
      ),
    );
  }
}

TopBarAllhabitsW 代码

import 'package:flutter/material.dart';
import 'package:habit_tracker/utils/icons.dart';
import 'package:habit_tracker/screens/habit_adder.dart';
import 'package:habit_tracker/screens/one_habit_details.dart';

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const OneHabitScreenC()),
            );
          },
          child: const Padding(
            padding: EdgeInsets.all(5.0),
            child: Icon(
              Icons.verified_user,
              color: Colors.green,
            ),
          ),
        ),
        InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const HabitAdderScreenC()),
            );
          },
          customBorder: const CircleBorder(),
          child: const Padding(
            padding: EdgeInsets.all(5.0),
            child: Icon(
              IconsMy.info,
              color: Colors.grey,
            ),
          )),
      ],
    );
  }
}

main.dart 代码

import 'package:flutter/material.dart';
import 'package:habit_tracker/screens/all_habits.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter/services.dart';

Future<void> main() async {
  //initialize hive
  // await Hive.initFlutter();
  // await Hive.openBox('userTercihleri');

  /* if(hiveReadData("tercih_text_size")=="myNull"){
    hiveWriteData("tercih_text_size", "22");
  }
  if(hiveReadData("tercih_date_format")=="myNull"){
    hiveWriteData("tercih_date_format", "G/A");
  }
  if(hiveReadData("tercih_font_style")=="myNull"){
    hiveWriteData("tercih_font_style", "Roboto");
  }
  if(hiveReadData("default-Color")=="myNull"){
    hiveWriteData("default-Color", "grey");
  } */

  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.dark,
      statusBarColor: Color(0xffeaeaf4)),
  );

  WidgetsFlutterBinding.ensureInitialized();
  final prefs = await SharedPreferences.getInstance();
  final showHome = prefs.getBool("showHome") ?? false;

  runApp(
    ProviderScope(
      child: MyApp(showHome: showHome),
    ),
  );
}

class MyApp extends StatelessWidget {
  final bool showHome;
  const MyApp({
    Key? key,
    required this.showHome,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // String fontStyle = hiveReadData("tercih_font_style");
    return MaterialApp(
      // localizationsDelegates: const [GlobalMaterialLocalizations],
      supportedLocales: const [Locale('en', 'US'), Locale('tr', 'TR')],
      theme: ThemeData(
        pageTransitionsTheme: const PageTransitionsTheme(builders: {
          TargetPlatform.android: CupertinoPageTransitionsBuilder(),
          TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
        }),
        textTheme:
        //  fontStyle=="Roboto"
        /*?*/ GoogleFonts.robotoTextTheme(Theme.of(context).textTheme)
        /*  :fontStyle=="Opensans"
        ?GoogleFonts.openSansTextTheme(Theme.of(context).textTheme)
        :fontStyle=="Montserrat"
        ?GoogleFonts.montserratTextTheme(Theme.of(context).textTheme)
        :GoogleFonts.quicksandTextTheme(Theme.of(context).textTheme) */
      ),
      debugShowCheckedModeBanner: false,
      home: showHome ? AllHabitsScreenC() : AllHabitsScreenC(),
    );
  }
}

有没有朋友遇到过类似的问题?或者能从我的代码里发现可能导致这个问题的点?麻烦大家帮忙指点一下,谢谢啦!

备注:内容来源于stack exchange,提问作者mesh

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.04.23 13:57:48