How to edit the text title in CupertinoSliverNavigationBar using a controller in flutter?

Issue

I was wondering if there is a way to actually edit the large title as part of the CupertinoSliverNavigationBar for my TODO list app I want to make the large title as a title that can be editable and when scrolled up it actually displays the title.

 Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        child: CustomScrollView(
      slivers: [
        // The CupertinoSliverNavigationBar
        CupertinoSliverNavigationBar(
          leading: Material(
              child: IconButton(
            icon: const Icon(Icons.home),
            onPressed: () {},
          )),
          trailing: Material(
              child: IconButton(
            icon: const Icon(Icons.add),
            onPressed: () {},
          )),
          largeTitle: const Text('Large Title'),
        ),
      ],
    ));
  }
}

here is the basic code.

thank you.

Solution

You can a state variable for title or direct controller.text. To update the UI, you can addListener or onChanged method on CupertinoTextField.

final TextEditingController controller = TextEditingController.fromValue(
  const TextEditingValue(text: "default title"),
);

@override
void initState() {
  super.initState();
  controller.addListener(() {
    setState(() {});
  });
}

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return CupertinoPageScaffold(
      child: CustomScrollView(
    slivers: [
      // The CupertinoSliverNavigationBar
      CupertinoSliverNavigationBar(
        leading: Material(
            child: IconButton(
          icon: const Icon(Icons.home),
          onPressed: () {},
        )),
        trailing: Material(
            child: IconButton(
          icon: const Icon(Icons.add),
          onPressed: () {},
        )),
        largeTitle: Text(controller.text),
      ),

      SliverToBoxAdapter(
        child: CupertinoTextField(
          controller: controller,
        ),
      ),
    ],
  ));
}

Answered By – Yeasin Sheikh

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)