Flutter SlidingUpPanel widget with TextField not working

Question

I am using the SlidingUpPanel widget which is documented here.

When I use the header property and make it a TextField widget, the panel no longer slides up and down and just remains collapsed.

The full code for the page is below:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

class HomePage extends StatefulWidget {

  HomePage();

  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {

  _HomePageState();

  Widget _buildSuggestions() {
    List<myObject> myObjects = _getRecentmyObjects();
    return new ListView.builder(
        itemCount: myObjects.length,
        itemBuilder: (context, index) {
          return Card(
            elevation: 2,
            child: ListTile(
              title: Text(myObjects[index].firstLine),
              subtitle: Text(
                myObjects[index].secondLine + "," + myObjects[index].thirdLine,
                maxLines: 2,
              ),
            ),
          );
        });
  }

  List<myObject> _getmyObjects() {
    return [
      new myObject(
          firstLine: "This is",
          secondLine: "one element ",
          thirdLine: "of a list of items",
          aNumber: "00000"),
      new myObject(
          firstLine: "This is a",
          secondLine: "second element of a list",
          thirdLine: "",
          aNumber: "00000"),
      new myObject(
          firstLine: "And a ", secondLine: "Third", thirdLine: "", aNumber: "000"),
    ];
  }

  PanelController _panelController = new PanelController();

  @override
  Widget build(BuildContext context) {
    BorderRadiusGeometry radius = BorderRadius.only(
      topLeft: Radius.circular(24.0),
      topRight: Radius.circular(24.0),
    );
    return Scaffold(
      body: SlidingUpPanel(
        controller: _panelController,
        minHeight: 80,
        header:  new TextField(),
        panel:
         child: Container(
            padding: const EdgeInsets.only(top: 0),
            child: Center(
              child: _buildSuggestions(),
            ),
          ),
        ]),
        body: Container(),
        borderRadius: radius,
      ),
    );
  }
}

If I remove the header parameter, the widget works as expected. Why won't it slide up with the TextField?

Answer 1

header is an Optional persistent widget that floats above the [panel] and attaches to the top of the [panel].

I think you are looking for something like this

To achieve this you can use

Column[TextField, Flexible(child:ListView())]

Check out the below code.

import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage();

  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  _HomePageState();

  Widget _buildSuggestions() {
    List<MyObject> myObjects = _getmyObjects();
    return new ListView.builder(
        itemCount: myObjects.length,
        itemBuilder: (context, index) {
          return Card(
            elevation: 2,
            child: ListTile(
              title: Text(myObjects[index].firstLine),
              subtitle: Text(
                myObjects[index].secondLine + "," + myObjects[index].thirdLine,
                maxLines: 2,
              ),
            ),
          );
        });
  }

  List<MyObject> _getmyObjects() {
    return [
      new MyObject(firstLine: "This is", secondLine: "one element ", thirdLine: "of a list of items", aNumber: "00000"),
      new MyObject(firstLine: "This is a", secondLine: "second element of a list", thirdLine: "", aNumber: "00000"),
      new MyObject(firstLine: "And a ", secondLine: "Third", thirdLine: "", aNumber: "000"),
    ];
  }

  PanelController _panelController = new PanelController();

  @override
  Widget build(BuildContext context) {
    BorderRadiusGeometry radius = BorderRadius.only(
      topLeft: Radius.circular(24.0),
      topRight: Radius.circular(24.0),
    );
    return Scaffold(
      appBar: AppBar(),
      body: SlidingUpPanel(
        borderRadius: radius,
        controller: _panelController,
        minHeight: 80,
        body: Placeholder(),
        panel: Container(
          padding: EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(
                  labelText: "Search",
                ),
              ),
              Flexible(
                child: _buildSuggestions(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyObject {
  String firstLine;
  String secondLine;
  String thirdLine;
  String aNumber;

  MyObject({
    this.firstLine,
    this.secondLine,
    this.thirdLine,
    this.aNumber,
  });
}

Hope it helps :)