Flutter小部件未在屏幕上呈现,我收到以下错误:“RenderFlex在底部溢出了无限像素,“

rdlzhqv9  于 2023-05-01  发布在  Flutter
关注(0)|答案(3)|浏览(97)

我在做一个flutter app。窗口小部件未呈现在屏幕上。下面是problamatic代码:

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Let's get productive!"),
        ),
        body: Material(
          child: Column(
            children: [
              Pomodoro(),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
              //backgroundColor:
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.analytics),
              label: 'Home',
              //backgroundColor:
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Home',
              //backgroundColor:
            ),
          ],
        ),
      ),
    );
  }
}

The Pomodoro class

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xff1542bf), Color(0xff51a8ff)],
            begin: FractionalOffset(0.5, 1),
          ),
        ),
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Padding(
              padding: EdgeInsets.all(12.0),
              child: Text(
                "Pomodoro",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 30.0,
                ),
              ),
            ),
            const SizedBox(
              height: 20.0,
            ),
            Expanded(
              child: CircularPercentIndicator(
                radius: 250.0,
                percent: percent,
                animation: true,
                animateFromLastPercent: true,
                lineWidth: 20.0,
                progressColor: Colors.white,
                backgroundWidth: 50.0,
                center: Text(
                  "$timeInMinute",
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 80.0,
                  ),
                ),
              ),
            ),
            const SizedBox(
              height: 20.0,
            ),
          ],
        ),
      ),
    );
  }
}

我已经尝试过改变容器的高度和宽度,删除scaffold并只返回容器,删除容器只保留scaffold主体中的列并删除扩展的小部件。无论我做什么,我都会犯同样的错误。请帮帮我。
此外,我不想让主屏幕滚动。我希望所有的东西都能放进屏幕里,同时也能对不同的屏幕尺寸做出React。我试过媒体查询给予大小,但也没有工作。
Here's the link to the github repo for the app:

guicsvcw

guicsvcw1#

你的代码有一些问题。
1.错误是说你的小部件在底部溢出,所以你需要让你的页面滚动。您可以将列更改为ListView

child: Material(
         child: ListView(
           shrinkWrap: true,
           children: [
             Pomodoro(),
           ],
         ),
       ),

1.您在Pomodoro()中的容器没有height参数,这会导致渲染框问题。

Container(
   decoration: const BoxDecoration(...),
   width: double.infinity,
   height: 500.0, //add a height
izkcnapc

izkcnapc2#

您需要删除一些小部件以使上述代码正常工作。
首先,从Pomodoro类中删除Scaffold小部件。最后,从CircularPercentIndicator中删除扩展的Widget。它会纠正你的错误。查看下面的番茄钟类代码。

return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xff1542bf), Color(0xff51a8ff)],
          begin: FractionalOffset(0.5, 1),
        ),
      ),
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const Padding(
            padding: EdgeInsets.all(12.0),
            child: Text(
              "Pomodoro",
              style: TextStyle(
                color: Colors.white,
                fontSize: 30.0,
              ),
            ),
          ),
          const SizedBox(
            height: 20.0,
          ),
          CircularPercentIndicator(
            radius: 250.0,
            percent: 0.8,
            animation: true,
            animateFromLastPercent: true,
            lineWidth: 20.0,
            progressColor: Colors.white,
            backgroundWidth: 50.0,
            center: Text(
              "00.00",
              style: const TextStyle(
                color: Colors.white,
                fontSize: 80.0,
              ),
            ),
          ),
          const SizedBox(
            height: 20.0,
          ),
        ],
      ),
    );

如果你想让你的番茄钟控件占据整个屏幕,只需要用一个扩展的控件来 Package 容器。

3pvhb19x

3pvhb19x3#

这里是一个修订的测试和工作代码。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Let's get productive!"),
        ),
        body: Material(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Pomodoro(),
              ],
            ),
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
             
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.analytics),
              label: 'Home',
             
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Home',
            ),
          ],
        ),
      ),
    );
  }
}

class Pomodoro extends StatelessWidget {
  const Pomodoro({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xff1542bf), Color(0xff51a8ff)],
          begin: FractionalOffset(0.5, 1),
        ),
      ),
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height / 6,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const Padding(
            padding: EdgeInsets.all(12.0),
            child: Text(
              "Pomodoro",
              style: TextStyle(
                color: Colors.white,
                fontSize: 30.0,
              ),
            ),
          ),
          const SizedBox(
            height: 20.0,
          ),
          Expanded(
            child: CircularProgressIndicator(),
          ),
          const SizedBox(
            height: 20.0,
          ),
        ],
      ),
    );
  }
}

相关问题