How to put a floating widget in flutter?

Admin 1
Viewed 9567

What I want to do is make a TextField stay in the same position by scrolling down the screen. I want to know if there is a way to do this?

This is the TextField that I want to be floating:

enter image description here

This is the code, the CardWidget are just cards and searchInput is the textField:

class RouteListPage extends StatefulWidget {

  @override
  _RouteListPageState createState() => _RouteListPageState();
}

class _RouteListPageState extends State<RouteListPage> {

  TextEditingController searchController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    final _screenSize = MediaQuery.of(context).size;
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            searchInput(),
            CardWidget(),
            CardWidget(),
            CardWidget(),
            CardWidget(),
            SizedBox(height: 25.0)
          ],
        ),
      ),
    );
  }

  Widget searchInput(){
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 24, vertical: 25.0),
      padding: EdgeInsets.symmetric(horizontal: 24),
      decoration: BoxDecoration(
        color: Color(0xfff6f6f6),
        borderRadius: BorderRadius.circular(30),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.black45,
            offset: Offset(0.0, 2.0),
            blurRadius: 10.0,
          ),
        ],
      ),
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              controller: searchController,
              decoration: InputDecoration(
                hintText: "Buscar rutas",
                hintStyle: TextStyle(fontFamily: "WorkSansSemiBold", fontSize: 16.0),
                border: InputBorder.none
              ),
            )
          ),
          InkWell(
            onTap: () {},
            child: Container(
              child: Icon(Icons.search, color: Tema.Colors.loginGradientEnd, size: 28.0)
            )
          )
        ],
      ),
    );
  }

}
flutter
3 Answers

You can use a Stack widget and have the scrolling widget below the TextField widget. Use the Positioned widget to control the position of searchInput()

Your build method will change to this: 

@override
Widget build(BuildContext context) {
    final _screenSize = MediaQuery.of(context).size;
    return Scaffold(
      body: Stack(
        children: <Widget>[
          SingleChildScrollView(
            child: Column(
              children: <Widget>[
                CardWidget(),
                CardWidget(),
                CardWidget(),
                CardWidget(),
                SizedBox(height: 25.0)
              ],
            ),
          ),
          Positioned(
            top: 24.0,
            left: 0.0,
            right: 0.0,
            child: searchInput(),
          )
        ],
      ),
    );
  }
user_110391640

Instead of SingleChildScrollView try using this

Stack(
    children: <Widget>[
      searchInput(),
      ListView(
        children: <Widget>[
          CardWidget(),
          CardWidget(),
          CardWidget()
        ],
      )
    ],
  ),
user_83391590

Use a Stack and add your scrollview and the input as children:

Stack(
  children: [
    SingleChildScrollView(),
    searchInput(),
  ],
)
user_50613810
Related