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

Issue

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),
                              ),
                            );
                          }),
                    ],
                  )),
            ),
          ],
        )
    );
  }

Answered By – Wilson Toribio

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *