Search code examples
flutterlistviewdartscrollview

here my listview is not scrolling dart flutter , please help me iam new to flutter


return Scaffold(
   body: Container(
     width: MediaQuery.of(context).size.width,
     height: MediaQuery.of(context).size.height,
     child: Stack(
       children: [
         Positioned(
           width: MediaQuery.of(context).size.width,
           height: 25.0*SizeConfig.heightMultiplier,
           child:Container(
             decoration: BoxDecoration(
                 gradient: LinearGradient(
                     begin: Alignment.topCenter,
                     end: Alignment.bottomCenter,
                     colors: [Color(0xff009cba), Color(0xff000e11)])

             ),
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               crossAxisAlignment: CrossAxisAlignment.center,
               children: [
                 Expanded(flex:3,
                   child: Container(
                     child: Column(
                       mainAxisAlignment: MainAxisAlignment.center,
                       crossAxisAlignment: CrossAxisAlignment.end,
                       children: [
                         FittedBox(child: Text("Firm Details",style: GoogleFonts.lato(color: Color(0xfffbfbfb),fontSize: 1.6*SizeConfig.textMultiplier),/*TextStyle(color: Color(0xfffbfbfb),)*/)),
                         SizedBox(height: 0.5*SizeConfig.heightMultiplier,),
                         FittedBox(child: Text("Please select the category that best describes your business model.",style: GoogleFonts.lato(color: Color(0xffb3fbfbfb),fontSize: 1.3*SizeConfig.textMultiplier) /*TextStyle(color: Color(0xffb3fbfbfb),fontSize: 12.0)*/,)),
                       ],
                     ),
                   ),
                 ),
                 Expanded(flex:1,child:Container(
                   width: 10.0*SizeConfig.widthMultiplier,
                   height: 10.0*SizeConfig.heightMultiplier,
                   child:Image.asset("assets/images/firmDetail.png",width:1.0*SizeConfig.widthMultiplier,height: 1.0*SizeConfig.heightMultiplier,),
                 ), ),
               ],
             ),
           ), ),
         Positioned(
           top:20.0*SizeConfig.heightMultiplier,
           child:Container(
             width: MediaQuery.of(context).size.width,
             height: 500.0*SizeConfig.heightMultiplier,
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(5.0*SizeConfig.widthMultiplier),
               color: Colors.white,
             ),
             child:new Container(
               child: ListView(
                 scrollDirection: Axis.vertical,
                 children: <Widget>[
                   SizedBox(height: 2.0*SizeConfig.heightMultiplier,),
                   Center(child: Padding(
                     padding:  EdgeInsets.all(1.8*SizeConfig.heightMultiplier),
                     child: Text("Please select the category that best describes your business model.",style: GoogleFonts.lato(fontWeight: FontWeight.bold),),
                   )),
                   horizontalList1,
                   verticalList,    // here vertical list
                 ],
               ),
             ),
           ),
         ),
       ],
     ),
   ),
 );

here in widget verticallist Listview is not scrolling,but when we add Sizedbox after form with fixedheight then it is scrolling but i dont need fixed height for scrollview

      Widget verticalList = new Container(
        margin: EdgeInsets.symmetric(vertical: 0*SizeConfig.heightMultiplier),
        height: MediaQuery.of(context).size.height,
        child:ListView(
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: [
            Form(
              key: _formKey,
              child:ListView(
                shrinkWrap: true,
                children: [
                  Padding(
                    padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
                    child: new TextFormField(
                      validator: (String value) {
                        if (value.isEmpty) {
                          return 'PinCode';
                        } else {
                          return null;
                        }
                      },
                      keyboardType: TextInputType.phone,
                      controller: _pincode,
                      // selectionColor:Color(0xffe4065f),
                      style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,),
                      decoration: const InputDecoration(
                        labelText: "PinCode",
                        labelStyle: TextStyle(color: Color(0xffe4065f)),
                        focusColor: Color(0xffe4065f),
                        hintText:
                        "PinCode",
                        hintStyle: TextStyle(fontSize: 13.0),
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(
                                color: Color(0xffe4065f))),
                      ),
                      //  style: Theme.of(context).textTheme.body1,
                    ),
                  ),
                  Padding(
                    padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
                    child: new TextFormField(
                      validator: (String value) {
                        if (value.isEmpty) {
                          return 'PAN of the unit. is required';
                        } else {
                          return null;
                        }
                      },
                      keyboardType: TextInputType.text,
                      controller: _pan,
                      // selectionColor:Color(0xffe4065f),
                      style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,),
                      decoration: const InputDecoration(
                        labelText: "PAN of the unit",
                        labelStyle: TextStyle(color: Color(0xffe4065f)),
                        focusColor: Color(0xffe4065f),
                        hintText:
                        "PAN of the unit",
                        hintStyle: TextStyle(fontSize: 13.0),
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(
                                color: Color(0xffe4065f))),
                      ),
                      //  style: Theme.of(context).textTheme.body1,
                    ),
                  ),
                  Padding(
                    padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
                    child: FormField<String>(
                      builder: (FormFieldState<String> state) {
                        return InputDecorator(
                          decoration: InputDecoration(
                            labelText: "Constitution",
                            errorStyle: TextStyle(color: Colors.redAccent, fontSize: 1.6*SizeConfig.textMultiplier),
                            hintText: 'Please select expense',),
                          isEmpty: _constitutions == '',
                          child: DropdownButtonHideUnderline(
                            child: DropdownButton<String>(
                              value: _constitutions,
                              isDense: true,
                              onChanged: (String newValue) {
                                setState(() {
                                  _constitutions = newValue;
                                  state.didChange(newValue);
                                });
                              },
                              items: _constitution.map((String value) {
                                return DropdownMenuItem<String>(
                                  value: value,
                                  child: Text(value,style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,)),
                                );
                              }).toList(),
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                  Padding(
                    padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
                    child: new TextFormField(
                      validator: (String value) {
                        if (value.isEmpty) {
                          return 'Line of Activity is required';
                        } else {
                          return null;
                        }
                      },
                      keyboardType: TextInputType.text,
                      controller: _lineActicity,
                      // selectionColor:Color(0xffe4065f),
                      style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,),
                      decoration: const InputDecoration(
                        labelText: "Line of Activity",
                        labelStyle: TextStyle(color: Color(0xffe4065f)),
                        focusColor: Color(0xffe4065f),
                        hintText:
                        "Line of Activity",
                        hintStyle: TextStyle(fontSize: 13.0),
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(
                                color: Color(0xffe4065f))),
                      ),
                      //  style: Theme.of(context).textTheme.body1,
                    ),
                  ),
                  Padding(
                    padding:EdgeInsets.only(
                      left: 1.0*SizeConfig.widthMultiplier,
                      right: 1.0*SizeConfig.widthMultiplier,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        FlatButton(
                          onPressed: () {
//x                        _postData();
                            if (!_formKey.currentState.validate()) {
                              //_formKey.currentState.save();
                              if (_constitutions == null || _districtSelectedValue == null) {
                                print("eroore");
                                Flushbar(
                                  message:  "please select required fields",
                                  duration:  Duration(seconds: 3),
                                )..show(context);
                              }  else {
                                // Every of the data in the form are valid at this point
                                _formKey.currentState.save();
                                print(_constitutions);
                              }
                            } else {
                              // submitOtp();
                              _postData();
                            }
                          },
                          child: Text(
                            "SAVE & NEXT",
                            style: GoogleFonts.lato(color: Colors.white),
                          ),
                          color: Color(0xffe4065f),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8.0),
                            side: BorderSide(color: Color(0xffe4065f)),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
         //   SizedBox(height: 1000,),
          ],
        )
    );

here ,when we add Sizedbox after form with fixedheight then it is scrolling but i dont need fixed height for scrollview im new to flutter please help


Solution

  • I would suggest a simple widget hierarchy like

    Scaffold
     - Container (For the red background)
      - Column
       - Container (with size for the lorem ipsom text.
        - Lorem Ipso Text.
       - Expanded (So that it will use the rest of the height automatically.)
        - Container (with white back ground and top rounded borders. Makes sure you add circular borders only to top and not to bottom of this container.
         - DefaultTabController
          - builder (to get different context of the default tab controller if more than one is used in your full app.)
           - Column
            - TabBar (if the number of categories is large use scrolling here as a property of the tab bar.) wrap in container if you need specific height of the tab bar.
            - Expanded
             - TabBarView to show the appropriate form.
              - SingleChildScrollView
               -Column
                -Your fields