Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How Do I Have A Fixed TextField At The Bottom Of A SingleChildScrollView

My App page UI uses a SingleChildScrollView as the parent widget to enable the page to scroll. I am finding it difficult to add a fixed Textfield at the bottom. I don’t want the Textfield to scroll with the rest of the page. How do I achieve this. Here is my code:

 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
     title: Text(
       'Thread',
       style: TextStyle(fontWeight: FontWeight.bold),
     ),
   ),

  body: SingleChildScrollView(
    controller: _scrollController,
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        /****************************************************** */
        /************ List of threads UI ********************** */
        /****************************************************** */
        ThreadRepliesTile(list: featuredThreads, isLoadingThreads:isLoadingMore),

        //Fixed Textfield at the bottom
      const Divider(height: 0.1),
      Padding(
        padding: const EdgeInsets.only(left: 16, right: 16, bottom: 8),
        child: TextField(
          decoration: InputDecoration(
              hintText: "Post Your Reply",
              enabledBorder: const UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
              ),
              focusedBorder: const UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
              ),
              suffixIcon: IconButton(
                padding: const EdgeInsets.only(left: 8),
                icon: const Icon(Icons.camera_alt_outlined),
                onPressed: () {},
              )),
        ),
      )
     
      ]
    ), //close of Column

  ), close of single scroll view SingleChildScrollView
Tags:

2

Answers


  1. 0

    You need to wrap your singlechildscrollview with a expanded and column and put your textfield at the bottom of column:

    Column(
  children: [
    Expanded(child: SingleChildScrollView(child: Column),
    TextField(),
  ]
)
    Login or Signup to reply.
  2. 0

    Have you tried adding it like this :

     body: Column(
    children: [
      Expanded(
        child: SingleChildScrollView(
          controller: _scrollController,
          child: Column(
            children: [
              // List of threads UI
              ThreadRepliesTile(list: featuredThreads, isLoadingThreads: isLoadingMore),
              // Additional content can go here
            ],
          ),
        ),
      ),
      Container(
        color: Colors.white,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Divider(height: 0.1),
            Padding(
              padding: const EdgeInsets.only(left: 16, right: 16, bottom: 8),
              child: TextField(
                decoration: InputDecoration(
                  hintText: "Post Your Reply",
                  enabledBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey),
                  ),
                  focusedBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey),
                  ),
                  suffixIcon: IconButton(
                    padding: const EdgeInsets.only(left: 8),
                    icon: const Icon(Icons.camera_alt_outlined),
                    onPressed: () {},
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search