Search code examples
flutterlistviewsinglechildscrollviewlist.builder

How to add a row with a textformfield above a singlechildscrollview with a column and a list.builder?


I want to add add a row with a textformfield above the singleChildScrollView, but keep getting rendering errors. Please advise

Widget build(BuildContext context) {
    return Scaffold(
        body: 
        SingleChildScrollView(child:Column(
      children: [
          ListView.builder(
            itemCount: lstNumber.length,
            shrinkWrap: true,
            padding: EdgeInsets.only(top: 10,bottom: 10),
            itemBuilder: (context, index){
            return 
            ListTile(
              title: Text(lstNumber[index].toString(), style: TextStyle(color:Colors.red,fontSize: 15),),
            );
            }),
       
        ],
    ))
    //],)
    );
  }

Solution

  • Enter a Column that will contain the TextFormfield inside a Row and the SingleChildScrollView wrapped with an Expanded:

      List<int>? lstNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,16 ,17, 18 , 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: Column(
              children: [
          Row(
                  children: [
                    Container(
                      width: 300,
                child:const TextFormField(
            decoration: const InputDecoration(
              labelText:"Input",
              enabledBorder: UnderlineInputBorder(borderSide:BorderSide(color:Colors.red),
            borderRadius: BorderRadius.all(Radius.elliptical(5,10))
            ),
          )))]),
                Expanded(
                  child: SingleChildScrollView(
                      child: Column(
                        children: [
                          ListView.builder(
                              itemCount: lstNumber!.length,
                              shrinkWrap: true,
                              padding: EdgeInsets.only(top: 10, bottom: 10),
                              itemBuilder: (context, index) {
                                return ListTile(
                                  title: Text(
                                    lstNumber![index].toString(),
                                    style: TextStyle(color: Colors.red, fontSize: 15),
                                  ),
                                );
                              }),
                        ],
                      )),
                ),
              ],
            )
        );
      }