CODEWITHSUNDEEP
androidiosflutterdart
Mo7ammed 7amad
Mo7ammed 7amad

Reputation: 77

How to Center Row inside Container ? - Flutter

I tried to add Expanded ,but it didn't work with me . the BorderSide line centered with me but the Text didn't. I think the problem with Container is there any replacement can I use with the same features .Thanks in advance for your solution .

class MenuListItem extends StatelessWidget {
  final IconData? icon;
  final String title;
  final Function() onTap;

  const MenuListItem({
    Key? key,
     this.icon,

    required this.title,
    required this.onTap,
  }) : super(key: key);

 @override
 Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return InkWell(
      onTap: onTap,
      child: Container(
        //width: size.width,
        //alignment: Alignment.center,
        padding: EdgeInsets.symmetric(vertical: 10),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Colors.black12,
              width: 1,
            ),
          ),
        ),
        child: Row(
         crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Icon(this.icon),
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(8.0),
                child: Text(
                  title,
                  style: TextStyle(fontSize: 16),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

And I called MenuListItem in another class . The structure of the code below .

class TestCenter extends StatelessWidget {
  const TestCenter({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: Wrap(
          children: [
            Container(
              child: Column(
                // here **MenuListItem** widget 
              ),
            )
          ],
        ),
      ),
      
    );
  }
}

ScreenShot

Upvotes: 1

Views: 3497

Answers (2)

Thabiso
Thabiso

Reputation: 31

Adding

mainAxisAlignment: MainAxisAlignment.center

to your Row() should do the trick

Upvotes: 3

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63569

I hope this is the layout you are trying to archive.

enter image description here

For this we have to use Row mainAxisAlignment: MainAxisAlignment.center, and enabling the width of container. also, you are using Expanded on Text that need to be removed.

Widget


class MenuListItem extends StatelessWidget {
  final IconData? icon;
  final String title;
  final Function() onTap;

  const MenuListItem({
    Key? key,
    this.icon,
    required this.title,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return InkWell(
      onTap: onTap,
      child: Container(
        width: size.width,
        //alignment: Alignment.center,
        padding: EdgeInsets.symmetric(vertical: 10),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Colors.black12,
              width: 1,
            ),
          ),
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(this.icon),
            Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                title,
                style: TextStyle(fontSize: 16),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 0

Related Questions