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

Flutter – Removing the actions iconbutton depending on page

I have a separate Appbar file that I use for multiple pages. I want to be able to choose if I want to display the actions Iconbutton because I don’t want to have it on some pages. I want to keep all the code for the Iconbutton in my appbar file since it’s a lot of code. I have tried in other projects to put in the actions separately in the page file, but I don’t want to have to do that this time since I just want to be able to choose if the actions (IconButton) should be displayed or not basically.

This is my appbar code:

class MyAppBar extends StatefulWidget {
  const MyAppBar({super.key});

  @override
  State<MyAppBar> createState() => _MyAppBarState();
}

class _MyAppBarState extends State<MyAppBar> with SingleTickerProviderStateMixin {
  final player = AudioPlayer();

  // create the animation controller
  late AnimationController _animationController;

  // initiate animation controller
  @override
  void initState() {
    super.initState();
    
    _animationController = AnimationController(vsync: this, duration: const Duration(seconds: 1));
  }

  //method for when user taps icon
  bool videoPlaying = false;
  void _iconTapped() {
    if (videoPlaying == false) {
      playSound();
      _animationController.forward();
      videoPlaying = true;
    } else {
      pauseSound();
      _animationController.reverse();
      videoPlaying = false;
    }
  }

  @override
  Widget build(BuildContext context) {
    return AppBar(

      backgroundColor: Colors.transparent,
      toolbarHeight: 100,
      centerTitle: true,
      iconTheme: const IconThemeData(color: Colors.black),
      flexibleSpace: const Image(
        image: AssetImage('assets/images/backgroundappbar.png'),
        fit: BoxFit.cover,
      ),
      title: Center(
        child: IconButton(
            onPressed: () {
              Navigator.pushNamed(context, '/homepage'
              );
            },
            icon: Image.asset('assets/images/ha_logo.png', height: 80, width: 80,)),
      ),
      actions: [
        IconButton(
          onPressed: _iconTapped,
          icon: AnimatedIcon(
            icon: AnimatedIcons.play_pause,
            progress: _animationController,
          ),
        ),
      ],
    );
  }
   // Play audio
  Future<void> playSound() async {
    String audioPath = "audio/00_HarapAlb.mp3";
    await player.play(AssetSource(audioPath));
  }
   //Pause audio
  void pauseSound(){
    player.pause();
  }

}
Tags:

3

Answers


  1. 0

    You could just add a flag prop on your custom AppBar like so:

    class MyAppBar extends StatefulWidget {
  const MyAppBar({this.showAction = true, super.key});

  final bool showAction;

  @override
  State<MyAppBar> createState() => _MyAppBarState();
}

    and then on your AppBar’s actions just set a conditional statement:

    actions: [
  if (widget.showAction)
    IconButton(
      onPressed: _iconTapped,
      icon: AnimatedIcon(
        icon: AnimatedIcons.play_pause,
        progress: _animationController,
      ),
    ),
  ],

    so that whenever you don’t want to show the actions you call: MyAppBar(showAction: false) instead of just MyAppBar()

    Login or Signup to reply.
  2. 0 
    import 'package:flutter/material.dart';

class appbarCustom extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  bool isCentertitle;
  bool isautomaticallyImplyLeading;
  List<Widget>? actions;


  appbarCustom(
      {required this.title,
      this.isCentertitle = false,
      this.isautomaticallyImplyLeading = true,
      this.actions});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      automaticallyImplyLeading: isautomaticallyImplyLeading,
      centerTitle: isCentertitle,
      actions: actions,
    );
  }

  @override
  // TODO: implement preferredSize
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

    Here’s the model of the Appbar that you can create and can add required fields that you want and can have multiple actions that you want on any page differently ,by calling that app bar the snippet is below of calling that customAppBar

    appBar:  appbarCustom(title: 'Hello cart',isCentertitle: true,actions: [FlutterLogo(),Icon(Icons.abc_rounded)],),
    Login or Signup to reply.
  3. 0

    You can handle this by using just a flag variable:

    class MyAppBar extends StatefulWidget {
  bool hasActions;
  const MyAppBar({super.key, required this.hasActions});

  @override
  State<MyAppBar> createState() => _MyAppBarState();
}

    And in your AppBar:

    AppBar(

      actions: (widget.hasActions)? [
        IconButton(
          onPressed: _iconTapped,
          icon: AnimatedIcon(
            icon: AnimatedIcons.play_pause,
            progress: _animationController,
          ),
        ),
      ]
  : null,
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search