How to center the Widget inside column contained inside Singlechild Scrollview?

Viewed 67

I am designing a view for creating a group of users from firestore data. I want a view like whatsapp type create a group design. Below is my code :

@override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       backgroundColor: Colors.deepOrange,
       titleSpacing: 0.0,
       centerTitle: true,
       automaticallyImplyLeading: true,
       leading: _isSearching ? const BackButton() : Container(),
       title: _isSearching ? _buildSearchField() : Text("Create Group"),
       actions: _buildActions(),
     ),
     body: _buildGroupWidget(),
     floatingActionButton: FloatingActionButton(
       backgroundColor: Colors.deepOrange,
       elevation: 5.0,
       onPressed: () {
         // create a group
         createGroup();
       },
       child: Icon(
         Icons.send,
         color: Colors.white,
       ),
     ),
   );
 }

 Widget _buildGroupWidget() {
   return SingleChildScrollView(
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       crossAxisAlignment: CrossAxisAlignment.start,
       mainAxisSize: MainAxisSize.max,
       children: <Widget>[
         selectedUserList != null && selectedUserList.length > 0
             ? Container(
                 height: 90.0,
                 child: ListView.builder(
                   shrinkWrap: true,
                   scrollDirection: Axis.horizontal,
                   itemCount: selectedUserList.length,
                   itemBuilder: (BuildContext context, int index) {
                     return GestureDetector(
                       onTap: () {
                         selectedUserList.removeAt(index);
                         setState(() {});
                       },
                       child: Container(
                         margin: EdgeInsets.only(
                             left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
                         child: Column(
                           children: <Widget>[
                             Container(
                               height: 50.0,
                               width: 50.0,
                               decoration: BoxDecoration(
                                 shape: BoxShape.circle,
//                    color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
                                 color: Colors.primaries[
                                     index % Colors.primaries.length],
                               ),
                             ),
                             Container(
                               height: 20.0,
                               width: 50.0,
                               child: Center(
                                 child: Text(
                                   selectedUserList[index].userName,
                                   softWrap: true,
                                   overflow: TextOverflow.ellipsis,
                                 ),
                               ),
                             ),
                           ],
                         ),
                       ),
                     );
                   },
                 ),
               )
             : Container(),
         Container(
           alignment: Alignment.centerLeft,
           height: 30,
           width: double.infinity,
           decoration: BoxDecoration(
             color: Colors.deepOrange,
             boxShadow: [
               BoxShadow(
                   color: Colors.orange, blurRadius: 5, offset: Offset(0, 2)),
             ],
           ),
           child: Padding(
             padding: const EdgeInsets.symmetric(horizontal: 20.0),
             child: Text(
               "Contacts",
               style: TextStyle(
                 color: Colors.white,
                 fontWeight: FontWeight.w500,
               ),
             ),
           ),
         ),
userList != null && userList.length > 0
             ? ListView.builder(
                 shrinkWrap: true,
                 itemCount: userList.length,
                 physics: NeverScrollableScrollPhysics(),
                 itemBuilder: (BuildContext context, int index) {
                   return ListTile(
                     onTap: () {
                       if (selectedUserList.contains(userList[index])) {
                         selectedUserList.remove(userList[index]);
                       } else {
                         selectedUserList.add(userList[index]);
                       }
                       setState(() {});
                     },
                     title: Text(userList[index].userName),
                     subtitle: Text(userList[index].userContact),
                     leading: CircleAvatar(
                       backgroundColor: Colors.primaries[index],
                     ),
                   );
                 },
               )
             : Center(
                 child: Text("Data Unavailable!!",
                     style: TextStyle(
                         fontSize: 20.0,
                         fontWeight: FontWeight.w500,
                         color: Colors.blueGrey)))
       ],
     ),
   );
 }

The problem with my code is i want to center my last widget which is center widget which will be seen when there is no data. I want to set it to the center of the screen.

But, it not get to the center of the screen.

I have already tried with Expanded, Flex and other solutions from other resource references. But, it doesn't work for me.

Can anyone suggest me how to center my last widget ?

1 Answers

I think expanded should work wrapping your last widget.

Still, if it doesn't work for you then i you can remove the height of your other 2 widgets from full screen as your both widgets have static height which is 120 total here.

Container(
                  width: double.infinity,
                  height: MediaQuery.of(context).size.height - 120,
                  child: Center(
                    child: Text("Data Unavailable!!",
                        style: TextStyle(
                            fontSize: 20.0,
                            fontWeight: FontWeight.w500,
                            color: Colors.blueGrey)),
                  ))

This will solve your issue for your case.

Related