Flutter The specific RenderFlex in question is: RenderFlex#9b4ca relayoutBoundary=up9 OVERFLOWING

956

This is a problem associated with using column widget. to solve this, simply wrap the column with the SingleChildScrollView widget. it will solve the problem instantly

Share:
956
yodeveloper
Author by

yodeveloper

Updated on December 22, 2022

Comments

  • yodeveloper
    yodeveloper over 1 year

    I have a search bar that queries a listview(JSON) to get likely close input text from the listview(JSON) for some reason my horizontal listview hide in the right side and won't show until I start typing on the search bar textfield and when it shows it won't show fully but partly and the rest list still hiding at the right side of my device screen. Below is my code and attached is my screenshot:

                   Container(
                       height: 120,
                       // width: 150,
                       child: ListView.builder(
                           scrollDirection: Axis.horizontal,
                           // padding: EdgeInsets.all(5.0),
                           itemCount: _notesForDisplay.length+1,
                           itemBuilder: (context, position) {
                             return position == 0 ? _searchBar() : _listItem(position-1);
    
                           }
                       )),
    
    _listItem(position) {
       return InkWell(
    
           onTap: (){
             _myFeatureSelection = position.toString();
             debugPrint("myfeat:$_myFeatureSelection");
             //_fetchFeaturePickedList();
             _fetchComment();
           },
    
           child:Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: <Widget>[
                 Card(
                   semanticContainer: true,
                   clipBehavior: Clip.antiAliasWithSaveLayer,
                   child: Stack(
                     children: <Widget>[
                       Image.network(_notesForDisplay[position].img_link,
                           width: 120, height: 100, fit: BoxFit.cover),
                       /*Positioned(
                         // top: 16,
                         //left: 140,
                           child: Container(
                             height: 25,
                             width: 80,
                             decoration: BoxDecoration(
                                 borderRadius: BorderRadius.circular(5.0),
                                 color: Colors.black, //Color(0xff0F0F0F),
                                 boxShadow: [
                                   BoxShadow(
                                     color: Colors.black.withOpacity(0.3),
                                   )
                                 ]),
                             child: Center(
                               child: Text(
                                 _notesForDisplay[position].title,
                                 style: TextStyle(color: Colors.white),
                               ),
                             ),
                           ))*/
                     ],
                   ),
                   shape: RoundedRectangleBorder(
                       borderRadius: BorderRadius.circular(5.0)),
                   elevation: 5,
                   //margin: EdgeInsets.all(10),
                 ),
                 // _FeatureText(featurePhoto.title,16),
                 //_FeatureText(featurePhoto.subtitle,12),
               ]));}
    
    
     _searchBar() {
       return
         Container(
             width: 240,
             child: Align(
               alignment: Alignment.center,
               child: TextField(
                 //controller: searchController,
                 cursorColor: Colors.white,
                 style: TextStyle(color: Colors.white,fontSize: 12,
                     fontFamily: 'Montserrat'),
                 decoration: InputDecoration(
                   border: InputBorder.none,
                   prefixIcon: Icon(
                     Icons.search,
                     color: Colors.white,
                     size: 15,
                   ),
                   hintStyle: TextStyle(
                       color: Colors.white,
                       fontSize: 12,
                       fontFamily: 'Montserrat'),
                   //alignLabelWithHint: true,
                   hintText: "Search...",//contentPadding: EdgeInsets.only(top: 2),
                 ),
    
                 onChanged: (text) {
                   text = text.toLowerCase();
                   setState(() {
                     _notesForDisplay = feature.where((note) {
                       var noteTitle = note.title.toLowerCase();
                       return noteTitle.contains(text);
                     }).toList();
                   });
                 },
    
    
               ),
             ));
    
     }
    
    

    enter image description here

    enter image description here