child: Stack(
          //alignment: Alignment.center,

          children: <Widget>[
            Container(
              alignment: Alignment.center,
              width: MediaQuery.of(mContext).size.width / 1.7,
              decoration: ShapeDecoration(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0)),
                gradient: LinearGradient(
                    colors: gradient,
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight),
              ),
              child: Text(title,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.w500)),
              padding: EdgeInsets.only(top: 16, bottom: 16),
            ),

            Visibility(

              visible: isEndIconVisible,
              child: Padding(
                  padding: EdgeInsets.only(right: 10),
                  child: ImageIcon(
                    AssetImage("assets/ic_forward.png"),
                    size: 30,
                    color: Colors.white,
                  )),
            ),
          ],
        ),

I have a button which should be at the center of the screen. A text which is at the centre of the button and a right arrow. Since I want the button at the center i put alignment centre and so the right arrow coming as centre. Can anyone help me to solve this? I also want to know where we put click for this button.


Solution 1: Viren V Varasadiya

You can use simple row Widget to achieve you expected ui. Look at following code which help you may be.

Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Container(
        alignment: Alignment.center,
        width: MediaQuery.of(context).size.width / 1.7,
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30.0)),
            color: Colors.red
          ,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("vdsv",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.w500)),
            Visibility(
              visible: true,
              child: Padding(
                  padding: EdgeInsets.only(right: 10),
                  child: ImageIcon(
                    AssetImage("assets/images/logo.png"),
                    size: 30,
                    color: Colors.white,
                  )),
            ),
          ],
        ),
        padding: EdgeInsets.only(top: 16, bottom: 16),
      ),

    ],
  )


Solution 2: Zulfiqar

Add align before Visibility

child: Stack(
      //alignment: Alignment.center,

      children: <Widget>[
        Container(
          alignment: Alignment.center,
          width: MediaQuery.of(mContext).size.width / 1.7,
          decoration: ShapeDecoration(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30.0)),
            gradient: LinearGradient(
                colors: gradient,
                begin: Alignment.topLeft,
                end: Alignment.bottomRight),
          ),
          child: Text(title,
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.w500)),
          padding: EdgeInsets.only(top: 16, bottom: 16),
        ),

      Align(alignment: Alignment.topRight,
         child: Visibility(
          visible: isEndIconVisible,
          child: Padding(
              padding: EdgeInsets.only(right: 10),
              child: ImageIcon(
                AssetImage("assets/ic_forward.png"),
                size: 30,
                color: Colors.white,
              )),
        ),)
      ],
    ),