How to push down the listview without making the draggablescrollablesheet unscrollable?

0

I am running into issues pushing down the listview out of view of the draggablescrollablesheet (sheet) while still being able to scroll the sheet. So in simpler words I do not want the blue container to show up when the sheet is at the bottom. I have tried to edit the height of the listview container and that makes it go offscreen therefore unscrollable. I have also tried wrapping the sheet in a singlechildscrollview with no luck. I am trying to avoid using a button at all possible costs!

import 'package:flutter/material.dart';
import 'package:photosgroup2/chat/message_model.dart';
import 'package:photosgroup2/chat/user_model.dart';

class FeedTest extends StatefulWidget {
  FeedTest({Key key}) : super(key: key);

  @override
  _FeedTest createState() => _FeedTest();
}

class _FeedTest extends State<FeedTest> {

  _buildMessage(
    Message message,
    User user,
  ) {
    //Reply reply){
      String time= message.time;
    return Container(
      // color: Colors.yellow,
      child: Padding(
        padding: EdgeInsets.only(left: 0), //5
        child: Column(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.only(left: 5 ,top: 3.5), //10
                  child: new CircleAvatar(
                    radius: (17.5),
                    backgroundImage: AssetImage(
                      user.profilePic,
                    ),
                  ),
                ),
                SizedBox(
                  width: 5,
                ),
                Container(
                    //width: MediaQuery.of(context).size.width,
                 // width: 300,
                  
                    child: Material(
                      color:Color(0x00000000) ,  //TRANSPARENT
                      //color: const Color(0xf2ffffff),

                      ///Color(0xe6ffffff)  // ! REVISIT Change color of boxes???
                      /*borderRadius: BorderRadius.only(
                        topRight: Radius.circular(16.0),
                        bottomRight: Radius.circular(16.0),
                        bottomLeft: Radius.circular(16.0),
                      ),*/
                      child: Padding(
                        padding: EdgeInsets.only(
                            left: 10.0), //Revisit
                        child: Column(
                          //mainAxisSize: MainAxisSize.min,
                          mainAxisSize: MainAxisSize.min,
                          //crossAxis
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(
                height: 5,
                            ),
                            Text(
                user.name,
                style: TextStyle(
                  fontFamily: 'Lato-Bold',
                  fontSize: 13 ,
                  color: const Color(0xd9343f4b),
                ),
                textAlign: TextAlign.left,
                            ),
                            SizedBox(width: 8),
                            Padding(
                padding: const EdgeInsets.only(left:8.0),
                child: Text(
                  '$time hours ago',
                  style: TextStyle(
                    fontFamily: 'Lato',
                    fontSize: 12 ,
                    color: const Color(0xff5a6978),
                  ),
                  textAlign: TextAlign.left,
                ),
                            ),
                            SizedBox(
                height: 5,
                            ),
                          
                            //SizedBox(height: 10,),//if(message.imageUrl!='') {
                            //hasReplies(message, user, reply)
                            //},

                            //}
                          ],
                        ),
                      ),
                    ),
                  ),
              ],
            ),
            SizedBox(height:5),
          Container(
            //color:Colors.blue,
          //: EdgeInsets.only(right:10
            //right: 10 * SizeConfig.widthRatio,
          //),
          child: Container(
            //color: Colors.green,
            margin: EdgeInsets.only(left:5,right:15),
            child: Text(
              message.text,
              style: TextStyle(
                fontFamily: 'Lato',
                fontSize: 13 ,
                color: const Color(0xff5a6978),
                height: 1.5384615384615385

              ),
              textAlign: TextAlign.left,
            ),
          ),
                ),
                SizedBox(//color:Colors.amber,
                height:15),
                           Transform.translate(
                             offset: Offset(-6,0),
                                                        child: Container(
                    width: 350.0,
                    height: 0.5,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(1.0),
                      color: const Color(0x40343f4b),
                    ),
                  ),
                           ),
         SizedBox(//color:Colors.amber,
                height:5),
          ],
        ),
      ),
    );

  
  }
 
  @override
  Widget build(BuildContext context) {
    // visibility of reply button in top right corner
    return Scaffold(
      backgroundColor: const Color(0xfffafafa),
      body: SafeArea(
        bottom: false,
        top: false,
        child: //Column(
            //mainAxisAlignment: MainAxisAlignment.spaceAround,
            //children: <Widget>[

            Stack(
          children: <Widget>[
           
            DraggableScrollableSheet(
                initialChildSize: 0.068,
                minChildSize: 0.068,
                maxChildSize: 0.71,
                builder: (context, scrollController) {
                  return Container(
                      //padding: EdgeInsets.symmetric(horizontal: 20),
                      child: Stack(
                        children: [
                          Padding(
            padding: const EdgeInsets.only(top: 20.0),
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(32),
                topRight: Radius.circular(32),
              ),
              child: Container(
                width: 375, //screen width
                height: 812 * 0.71, //screen height *
                color: Color(0xffdfdfdf),
              ),
            ),
                          ),
                          Stack(
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 10, top: 20.0),
                child: ClipRRect(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(27.5),
                        topRight: Radius.circular(27.5),
                      ),
                      child: Container(
                        //margin: EdgeInsets.only(),
                        width:340,
                        //height: 515,
                        color: Colors.yellow,
                        child: ClipRRect(
                          borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(27.5),
                        topRight: Radius.circular(27.5),),
                         
                                          child: Container(
                                           // padding: EdgeInsets.only(top:40),
                                            color: Colors.blue,
                                            child: ListView.builder(
                            
              //reverse: true,
              controller: scrollController,
              itemCount: comments.length,
              itemBuilder: (BuildContext context, int index) {
              final User messenger = comments[index].sender;
              final Message message = comments[index];
              //final Reply reply = replies[index];
              return Column(children: <Widget>[
                _buildMessage(
                    message,
                    messenger,
                ), //reply),
                SizedBox(
                    height: 8,
                ) // !COME BACK TO SPACE BETWEEN
              ]);
              },
            ),
                                          ),
                        ),
                      ),),
              ),
            ],
                          ),
                          Stack(
            children: <Widget>[
              //67
              Padding(
                padding: EdgeInsets.only(left: 141, top: 6),
                child: SizedBox(
                    width: 93.0,
                    height: 29.0,
                    child: Stack(
                      children: <Widget>[
                        SizedBox(
                          width: 93.0,
                          height: 29.0,
                          child: Stack(
                            children: <Widget>[
                              // Adobe XD layer: 'Rectangle' (shape)
                              Container(
                                width: 93,
                                height: 29.0,
                                child: Padding(
                                  padding: EdgeInsets.only(
                  left: 1, top: 6),
                                  child: Text(
                                    'Place Holder',
                                    style: TextStyle(
                  fontFamily: 'Lato',
                  fontSize: 12,
                  color: const Color(0xffffffff),
                                    ),
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                                decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(27.5),
            color: const Color(0xf2343f4b),
                          ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                ),
              ),
            ],
                          ),
                        ],
                      ),
                    );
                },
              ),
          
                    
          ],
        ),
        //   ],
        //),
      ),
    );
  }
}


sheet pulled all the way up

sheet all the way down

flutter
listview
dart
draggable
asked on Stack Overflow Nov 25, 2020 by Isis Curiel • edited Nov 26, 2020 by Isis Curiel

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0