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

Why flutter add title on status bar?

the title overflowed

My page don’t need appbar and need load a list from api and list it with title.The title should in the head of listView not the status bar.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: Column(children: [
        ListTile(
          title: Text("chose your credentials",
              style: Theme.of(context).textTheme.bodySmall),
        ),
        Expanded(
          child: ListView(
// _credentials is a list load from api
            children: List.generate(_credentials.length, (index) {
              return Card(
                child: ListTile(
                  title: Text(_credentials[index].title),
                  trailing: Icon(Icons.star),
                ),
              );
            }),
          ),
        ),
      ]),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Text('ok'),
      ),
    );
  }
Tags:

4

Answers


  1. 0

    To make sure your title is below the status bar you can use SafeArea.

    Wrap your body with the widget:

    Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: // ... Your body
      ),
    );
}

    If you were using the parameter appBar from Scaffold, the Scaffold would automatically put a SafeArea on top of your screen. But since you are not using it, it doesn’t do it so you’ll have to add it manually.

    Login or Signup to reply.
  2. 0 
    Scaffold(
  appBar: AppBar(
    brightness: Brightness.dark,
    title: null,
  ),
  body: Column(
    children: [
      ListTile(
        title: Text(
          "Choose your credentials",
          style: Theme.of(context).textTheme.bodySmall,
        ),
      ),
      Expanded(
        child: ListView(
          children: List.generate(_credentials.length, (index) {
            return Card(
              child: ListTile(
                title: Text(_credentials[index].title),
                trailing: Icon(Icons.star),
              ),
            );
          }),
        ),
      ),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Text('ok'),
  ),
);
    Login or Signup to reply.
  3. 0

    wrap your body with SafeArea. this will indent the child by enough to avoid the status bar at the top of the screen.

    It will also indent the child by the amount necessary to avoid The Notch on the iPhone X, or other similar creative physical features of the display.

    Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Contianer() //app's body
      ),
    );
}

    and using AppBar can also fix this problem, it would put a SafeArea automatically

    Login or Signup to reply.
  4. 0

    You can simply wrap the Scaffold with SafeArea Widget. SafeArea widget prevents the child widget from going after the appbar or bottombar.

    Example:

    Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: // ... Your body
      ),
    );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search