Home > Back-end >  Place container instead of AppBar
Place container instead of AppBar

Time:01-01

I need to remove an app bar if a state changes in my app and I need to place a container at the top that will allow me text with custom description. I am trying to place a conditional statement before appBar but it doesn't allow me to. Are there other alternatives?

   return SafeArea(
      child: Scaffold(
          context.watch<UseData>().hideBar == false ? appBar:
        AppBar(
          // automaticallyImplyLeading: false,
          title:
          Text("Test", style: TextStyle(
              color: Colors.black
          )),
          centerTitle: true,
 
          bottomOpacity: 0,
          elevation: 2,
          backgroundColor: Colors.transparent,
          iconTheme: IconThemeData(color: Colors.black),
        ) : Container(child: ...)),

Too many positional arguments: 0 expected, but 1 found. (Documentation) Try removing the extra positional arguments, or specifying the name for named arguments.

I also tried using positioned, but the top: 0 keeps staying under AppBar, I need a custom container over the app bar.

     Positioned(
        top: 0,
        child: Container(
          child: Column(
            children: [
              Text("hi")
            ],
          )
        ),
      ),

enter image description here

CodePudding user response:

appBar accepts PreferredSizeWidget so you can't pass Container widget to it directly rather than just Wrap you Container into PreferredSize widget pass height inside preferredSize property as per your requirement. Check below code for reference :

return Scaffold(
      appBar: isAppBar
          ? AppBar(
              title: Text("Title Here"),
            )
          : PreferredSize(
              preferredSize: Size.fromHeight(100.00),
              child: Container(
                child: Text("Second Title"),
              ),
            ),
    );

CodePudding user response:

You can use PreferredSize in AppBar

return Scaffold(
        appBar: PreferredSize(
            child: context.watch<UseData>().hideBar == false
                ? AppBar(
                    // automaticallyImplyLeading: false,
                    title: Text("Test", style: TextStyle(color: Colors.black)),
                    centerTitle: true,

                    bottomOpacity: 0,
                    elevation: 2,
                    backgroundColor: Colors.transparent,
                    iconTheme: IconThemeData(color: Colors.black),
                  )
                : Container(),
            preferredSize: const Size.fromHeight(kToolbarHeight)),
      ),
  • Related