CODEWITHSUNDEEP
flutternavigationflutter-layoutflutter-navigation
Indigo
Indigo

Reputation: 177

Stacking conditional navigator buttons in Flutter

I am trying to create a conditional menu list for a sliding menu. So far, I've gotten the functionality to work, as far as showing different menu items for different types of users. But my only issue now is, in the menu, these two items "Messages" and Settings" are showing up side by side of each other. I've tried to move the second Icon row outside of the row brackets and so on. I just can't figure it out. These brackets are already confusing as is, for me. Can someone look at this and help me get the Settings Icon to do under Messages?

I've included the complete method snippet so everyone can have an idea of what I'm trying to do. This was the only way I knew how to do it where I can make my menu conditional.

customSlideMenu() {
    Function onTap;
    bool ownProfile = currentOnlineUserId == widget.userProfileId;
    if(ownProfile) {
      return Padding(
        padding: const EdgeInsets.fromLTRB(15.0, 0, 8.0, 0),
        child: InkWell(
          splashColor: Colors.blue,
          onTap: onTap,
          child: Container(
            height: 40,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(Icons.mail),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        "Messages",
                        style: TextStyle(fontSize: 16.0),
                      ),
                    ),
                    Icon(Icons.settings),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        "Settings",
                        style: TextStyle(fontSize: 16.0),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      );
    } else {
      return Padding(
        padding: const EdgeInsets.fromLTRB(15.0, 0, 8.0, 0),
        child: InkWell(
          splashColor: Colors.blue,
          onTap: onTap,
          child: Container(
            height: 40,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(Icons.mail),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        "Message",
                        style: TextStyle(fontSize: 16.0),
                      ),
                    ),
                    Icon(Icons.block),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        "Block",
                        style: TextStyle(fontSize: 16.0),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      );
    }
  }

Upvotes: 0

Views: 47

Answers (1)

ByteMe
ByteMe

Reputation: 1670

the Row widget align its children right next to each other. Try using the Column widget to achieve stacking two children on top of each other

        Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Icon(Icons.mail),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "Messages",
                    style: TextStyle(fontSize: 16.0),
                  ),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Icon(Icons.settings),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "Settings",
                    style: TextStyle(fontSize: 16.0),
                  ),
                ),
              ],
            )
          ],
        ),

Upvotes: 1

Related Questions