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

Flutter – How to move the toolbar a bit to the left?

This is the code

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      darkTheme: ThemeData.dark(),
            

      home: SafeArea(
        child: Scaffold(
                backgroundColor: Color(0xFFf8dbb9),
                endDrawer: Drawer(
                  backgroundColor: Color(0xFFf8dbb9),
                  // shadowColor: Color.fromARGB(255, 172, 170, 169),
                  // elevation: 1,
                  child: ListView(),
                ),
                appBar: AppBar(
                  backgroundColor: Color(0xFFf8dbb9),
                  shadowColor: Color(0xFFf8dbb9),
                  elevation: 0,
                  iconTheme: IconThemeData(color: Colors.black,
                    size: 24),
                  toolbarHeight: 100,


                ),
      
          
          ),
      )
        
      ),
    );
  
}

ChatGPT suggested that i add an action with a sizedbox to create the space, but the toolbar become missing after that. I added right below the toobarHeight.

              toolbarHeight: 100,
              actions: [SizedBox(width: 10,)],
Tags:

2

Answers


  1. 0

    You can use EndDrawerButton widget.

    actions: const [
  EndDrawerButton(),
  SizedBox(width: 16),
]

    fullcode

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      darkTheme: ThemeData.dark(),
      home: SafeArea(
        child: Scaffold(
          backgroundColor: const Color(0xFFf8dbb9),
          endDrawer: Drawer(
            backgroundColor: const Color(0xFFf8dbb9),
            // shadowColor: Color.fromARGB(255, 172, 170, 169),
            // elevation: 1,
            child: ListView(),
          ),
          appBar: AppBar(
            backgroundColor: const Color(0xFFf8dbb9),
            shadowColor: const Color(0xFFf8dbb9),
            elevation: 0,
            iconTheme: const IconThemeData(color: Colors.black, size: 24),
            toolbarHeight: 100,
            actions: const [
              EndDrawerButton(),
              SizedBox(width: 16),
            ]
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    if the toolbar is get missing add

     final _scaffoldKey = GlobalKey<ScaffoldState>();
 //scaffold key to handle drawer behaviour manually

    assign it to the scaffold

    Scaffold(
    key: _scaffoldKey,...

    and add button to handle drawer opening

    actions: [
        IconButton(
            onPressed: () {
              _scaffoldKey.currentState!.openEndDrawer();
            },
            icon: Icon(Icons.menu)),
        SizedBox(
          width: 20, //add distance accordingly
        )
      ],

    here is the full code

        final _scaffoldKey = GlobalKey<ScaffoldState>();

  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        key: _scaffoldKey,
        backgroundColor: Color(0xFFf8dbb9),
        endDrawer: Drawer(
          backgroundColor: Color(0xFFf8dbb9),
          // shadowColor: Color.fromARGB(255, 172, 170, 169),
          // elevation: 1,
          child: ListView(),
        ),
        appBar: AppBar(
          backgroundColor: Color(0xFFf8dbb9),
          shadowColor: Color(0xFFf8dbb9),
          elevation: 0,
          iconTheme: IconThemeData(color: Colors.black, size: 24),
          toolbarHeight: 100,
          actions: [
            IconButton(
                onPressed: () {
                  _scaffoldKey.currentState!.openEndDrawer();
                },
                icon: Icon(Icons.menu)),
            SizedBox(
              width: 20, //add distance accordingly
            )
          ],
        ),
      ),
    );
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search