CODEWITHSUNDEEP
flutterdart
Paul White
Paul White

Reputation: 127

flutter - vertically align button

enter image description here

Need to help to copy the layout on image below. 2 buttons with 50% width and padding/spacing in between. I'm thinking also of using toggle button widget on it. see my draft code below.

Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Row(
        children: <Widget>[
          Container(
              color: Colors.green,
              width: (MediaQuery.of(context).size.width) / 2.5,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    MdiIcons.account,
                    size: 18.0,
                  ),
                  SizedBox(
                    width: 4.0,
                  ),
                  Text(
                    "Client",
                    style: TextStyle(fontSize: 16),
                  )
                ],
              )),
          Container(
              color: Colors.green,
              width: (MediaQuery.of(context).size.width) / 2.5,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    MdiIcons.accountTie,
                    size: 18.0,
                  ),
                  SizedBox(
                    width: 4.0,
                  ),
                  Text(
                    "Host",
                    style: TextStyle(fontSize: 16),
                  )
                ],
              )),
        ],
      ),
      ),

Upvotes: 2

Views: 4940

Answers (1)

ibrahimkarahan
ibrahimkarahan

Reputation: 3015

enter image description here

You can customize it,

      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Row(
          children: <Widget>[
            Expanded(
              child: RaisedButton(
                onPressed: () {},
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10)),
                elevation: 1.5,
                color: Colors.white,
                padding: const EdgeInsets.all(16),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Icon(Icons.developer_board),
                    SizedBox(height: 10),
                    Text("Experiences"),
                  ],
                ),
              ),
            ),
            SizedBox(width: 24),
            Expanded(
              child: RaisedButton(
                onPressed: () {},
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10)),
                elevation: 1.5,
                color: Colors.white,
                padding: const EdgeInsets.all(16),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Icon(Icons.event),
                    SizedBox(height: 10),
                    Text("Events"),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),

Upvotes: 1

Related Questions