CODEWITHSUNDEEP
flutterdart
Salwa Badreddine
Salwa Badreddine

Reputation: 125

How can I get a clickable icon on the top right corner of a button in flutter?

I'm trying to get a clickable icon on the top right corner of a button. I tried adding a FloatingActionButton to a row widget, but it just adds it to the right of the button. I want it floating over the button in the top right corner. Any help would be appreciated. I have a screenshot of how it looks now shown below. 

            ButtonTheme (
              minWidth: 250.0,
              height: 80.0,
              buttonColor: Color.fromRGBO(234, 135, 137, 1.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  RaisedButton (
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0),
                      side: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    child: Text(
                      'Daily Challenge',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 22.0,
                        fontFamily: 'MuseoSans',
                      ),
                    ),
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => DailyMedChallenge(uid: user.uid, qidDC: user.qidDC)),
                      );
                    },
                  ),
                  Container(
                    width: 35.0,
                    height: 35.0,
                    child: FloatingActionButton(
                      child: Icon(
                        Icons.help,
                      ),
                      backgroundColor: Colors.grey,
                      onPressed: () {

                      },
                    ),
                  )
                ],
              ),
            ),

how it looks now

Upvotes: 1

Views: 4880

Answers (1)

Ahmed Khattab
Ahmed Khattab

Reputation: 2799

you can use the Stack and Positioned widget for that


   ButtonTheme (
              minWidth: 250.0,
              height: 80.0,
              buttonColor: Color.fromRGBO(234, 135, 137, 1.0),
              child: Stack(
                 children: [
                  RaisedButton (
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0),
                      side: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    child: Text(
                      'Daily Challenge',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 22.0,
                        fontFamily: 'MuseoSans',
                      ),
                    ),
                    onPressed: () {
                     //click actions
                    },
                  ),
                  Positioned( // will be positioned in the top right of the container
                    top: 0,
                    right: 0,
                    child: Icon(
                        Icons.help,
                      ),
                   )
                ]
              )
            ),

Upvotes: 3

Related Questions