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

How do I change the color of Flutter NavBar() icon?

How do I change the color of the flutter navbar?
how do I change the color of this icon

class _MyHomePageState extends State<MyHomePage> {

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            drawer:  NavBar(),
        );
    }
}

This is my current code to show the navbar.

Can I change the color of the icon to blue for example?

Tags:

3

Answers


  1. 0

    Understanding your question you need to update the icon of the drawer icon. The drawer icon is part of the app bar you can use the leading property of the app bar to update the icon shown. Here is the sample code for doing the same.

    Docs: https://docs.flutter.dev/cookbook/design/drawer

    Leading property of App Bar: https://api.flutter.dev/flutter/material/AppBar/leading.html

    AppBar(
  leading: Builder(
    builder: (BuildContext context) {
      return IconButton(
        icon: const Icon(Icons.menu),
        onPressed: () { Scaffold.of(context).openDrawer(); },
        tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
      );
    },
  ),
)
    Login or Signup to reply.
  2. 0

    Please find the complete example that you can use in your app. you can test this code here (https://docs.flutter.dev/cookbook/design/drawer) by replacing the code in the interactive example with the code below

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
                icon: const Icon(Icons.menu,
                    color: Colors.pink,
                    size: 24.0,
                    semanticLabel: 'Text to announce in accessibility modes'),
                onPressed: () {
                  Scaffold.of(context).openDrawer();
                });
          },
        ),
        title: const Text('Pink Menu Icon'),
      ),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

    enter image description here

    Login or Signup to reply.
  3. 0

    To add style to an IconButton you would do something like this.

    IconButton(
              iconSize: 30, -> Changes the size
              icon: const Icon(Icons.clear, color: Colors.grey),
              onPressed: () {},
            ),

    Hope it helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search