Flutter A RenderFlex底部溢出99469像素

时间:2020-05-25 04:20:23

标签: flutter dart

我是新手,要解决以下问题,在第一个屏幕截图中,我将labelStart第127行的值设置为1.21,当我使用变量传递该值时,我会出现renderflex错误,如果我使用的是硬编码,我不会没有任何错误。不知道我在做什么错。我在网上阅读了几篇文章后尝试添加Expanded,但这没有帮助。有人可以指导我我在这里犯什么错误吗?

class _ListPageState extends State<ListPage> with SingleTickerProviderStateMixin {
  List<MusicModel> _list;
  var _value;
  int _playId;
  String _playURL;
  bool isPlaying = false;
  String _startTime;
  String _endTime;
  AnimationController _controller;
  AudioPlayer _audioPlayer = AudioPlayer();
  @override
  void initState() {
    _playId = 0;    
    _list = MusicModel.list;   
    _controller = AnimationController(vsync: this,duration: Duration(microseconds: 250));
    _value = 0.0; 
    _startTime="0.0";
    _endTime="0.0";
    super.initState();   
    _audioPlayer.onAudioPositionChanged.listen((Duration duration) {
      setState(() {
        _startTime = duration.toString().split(".")[0];
      });
    });
    _audioPlayer.onDurationChanged.listen((Duration duration) {
      setState(() {
        _endTime = duration.toString().split(".")[0];
      });
    });


  }  


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: AppColors.mainColor,
        centerTitle: true,
        title: Text("Skin - Flume", 
        style: TextStyle(color: AppColors.styleColor),),
      ),

      backgroundColor: AppColors.mainColor,
      body: Stack(
          children: <Widget>[
            Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(24.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    CustomButtonWidget(
                      child: Icon(
                        Icons.favorite,
                        color: AppColors.styleColor,                        
                      ),
                      size: 50,
                      onTap: (){

                      },
                    ),
                    CustomButtonWidget(                      
                      image: 'assets/logo.jpg',
                      size: 100,
                      borderWidth: 5,
                      onTap: (){
                        Navigator.of(context).push(
                            MaterialPageRoute(builder: (_) => DetailPage(),
                          ),
                        );
                      },
                    ),
                    CustomButtonWidget(
                      child: Icon(
                        Icons.menu,
                        color: AppColors.styleColor,                        
                      ),
                      size: 50,
                      onTap: (){
                        Navigator.of(context).push(
                            MaterialPageRoute(builder: (_) => HomePage(),
                          ),
                        );
                      },
                    )  
                  ],
                ),
              ),
              //Progress bar section
              // Expanded(child: SizedBox()),

              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: CustomProgressWidget(
                  value: _value,
                  labelStart: "1.21",
                  labelend: "2.34",
                ),
              ),
              // Expanded(child: SizedBox()),


              Expanded( //This is added so we can see overlay else this will be over button

                  child: ListView.builder(
                    physics: BouncingScrollPhysics(),//This line removes the dark flash when you are at the begining or end of list menu. Just uncomment for
                    itemCount: _list.length,
                    padding: EdgeInsets.all(12),
                    itemBuilder: (context,index){
                      return GestureDetector(
                          onTap: (){
                            Navigator.of(context).push(
                                MaterialPageRoute(builder: (_) => DetailPage(),
                              ),
                            );
                          },
                          child: AnimatedContainer(
                          duration: Duration(milliseconds: 500),
                          //This below code will change the color of sected area or song being played.
                          decoration: BoxDecoration(
                            color: _list[index].id ==  _playId
                                  ? AppColors.activeColor
                                  : AppColors.mainColor,
                                  borderRadius: BorderRadius.all(
                                    Radius.circular(20),
                                  ),
                          ),
                          //End of row color change
                          child: Padding(
                            padding: const EdgeInsets.all(16), //This will all padding around all size
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween, //This will allign button to left, else button will be infront of name
                              children: <Widget>[
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Text(
                                        _list[index].title,
                                        style: TextStyle(
                                          color: AppColors.styleColor,
                                          fontSize: 16,
                                        ),
                                      ),
                                    Text(
                                        _list[index].album,
                                        style: TextStyle(
                                          color: AppColors.styleColor.withAlpha(90),
                                          fontSize: 16,
                                        ),
                                      ),
                                  ],
                                ),
                                CustomButtonWidget( //This is Play button functionality on list page. 
                                  child: Icon(
                                    _list[index].id == _playId
                                      ? Icons.pause
                                      : Icons.play_arrow,
                                    color: _list[index].id == _playId
                                      ? Colors.white
                                      : AppColors.styleColor,
                                    ),
                                  size: 50,
                                  isActive: _list[index].id == _playId,
                                  onTap: () async {                                       
                                    if (isPlaying){                                       
                                      if (_playId == _list[index].id){                                        
                                        int status = await _audioPlayer.pause();
                                        if (status == 1){
                                          setState(() {
                                            isPlaying = false;
                                          }); 
                                        }
                                      } else {
                                        _playId = _list[index].id;
                                        _playURL = _list[index].songURL;
                                        _audioPlayer.stop();  
                                        int status = await _audioPlayer.play(_playURL);
                                        if (status == 1){
                                          setState(() {
                                            isPlaying = true;
                                          }); 
                                        } 
                                      }
                                      //  int status = await _audioPlayer.pause();
                                      //   if (status == 1){
                                      //     setState(() {
                                      //       isPlaying = false;
                                      //     }); 
                                      //   } 
                                    }  else {
                                      _playId = _list[index].id;
                                      _playURL = _list[index].songURL;
                                       int status = await _audioPlayer.play(_playURL);
                                        if (status == 1){
                                          setState(() {
                                            isPlaying = true;
                                          }); 
                                        } 
                                    } // String filePath = await FilePicker.getFilePath();            

                                  },
                                  // onTap: (){
                                  //   setState(() {
                                  //     _playId = _list[index].id;                                      
                                  //   });
                                  // },
                                )
                              ],
                            ),
                          ),  
                        ),
                      );
                    },
                  ),
              )
            ],        
          ),
          Align(
            alignment: Alignment.bottomCenter,
              child: Container(
              height: 50,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    AppColors.mainColor.withAlpha(0),
                    AppColors.mainColor,
                  ],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                )
              ),
            ),
          )
        ],

      ),

    );
  }
}

enter image description here

使用动态值变量更改行1.27之后。

enter image description here

2 个答案:

答案 0 :(得分:0)

您必须将Column包装在SingleChildScrollViewListView之类的滚动视图中。当列中的项目占用的空间超过可用空间时,就会发生此错误。

答案 1 :(得分:0)

我遇到了同样的问题,我的问题是我的变量从我的状态中提取出来的时间太长了,并且在变量之后首先显示了小部件。

在我的情况下使用 Getx,并以这种方式修复:

我的旧代码:

GetX<UserController>(
          builder: (_){
               
              return Text(_.user.name);

            }
          },
        ),

我的新代码

GetX<UserController>(
          builder: (_){
            
            if(_.user.email != null){
              return Text(_.user.name);

            }else{
              return Text('Loading....');
            }
          },
        ),