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

In Flutter how to change the size and color background of app bar back arrow

In flutter I increased the size of the back arrow in my appbar. But when I move the mouse on top of it the background color on mouse over has shifted image below. How to I change and move the background.

enter image description here

      @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
      theme: ThemeData(
        colorSchemeSeed: Color.fromARGB(255, 131, 104, 52),
        useMaterial3: true,
        appBarTheme: const AppBarTheme(
          backgroundColor: Color.fromARGB(255, 240, 239, 237),
          iconTheme: IconThemeData(size: 70, color: Colors.black, fill: 0.5, grade: 100, applyTextScaling: false,    shadows: [
      Shadow(
        blurRadius: 15.0,
        color: Colors.red,
        offset: Offset(3.0, 3.0),
      ),
    ],),
          toolbarHeight: 70,
        ),
        scaffoldBackgroundColor: Color.fromARGB(230, 230, 230, 230),
        inputDecorationTheme: const InputDecorationTheme(
          filled: true,
          fillColor: Colors.white,
        ),
      ),
    );
  }
Tags:

2

Answers


  1. 0

    While the icon size is quite big, you need to increase the leadingWidth of the appBar. Also having the same icon size as toolbarHeight isn’t a good ratio.

    AppBar(
  leadingWidth: 120
 ),
    Login or Signup to reply.
  2. 0

    Add the following style property inside your AppBar

    iconTheme: const IconThemeData(
          size: 20,
          shadows: <Shadow>[Shadow(color: Colors.red)],
          color: Colors.black, //change your color here
        ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search