Question 76136 in Flutter Question posted in
The official Flutter documentation can be found here.

how can I achieve buttons like these in flutter?

how can I achieve buttons like these in flutter?
I want these buttons to be sticked to the side and floated in the screen, just like bottom-navigation but to the side not to the buttom.
I hope you all get the idea.screen

Tags:

2

Answers


  1. 0

    stick to those steps:

    1. create a simple ElevatedButton
    2. customize it so it looks like what you want
    3. wrap your Scaffold with a Stack widget
    4. set alignment of Stack to alignment: Alignment.center
    5. in the children of that Stack, the Scaffold should be a direct child in the children property of Stack at this point, make sure of this
    6. add the ElevatedButton to the children property as well, it should be a sibling of the Scaffold widget
    7. wrap the ElevatedButton you created with a Postioned widget.
    8. set the left property of Positioned to 0, left: 0,
    9. now rotate the button by wrapping it with a Transform.rotate widget.
    10. set the angle property to pi from the dart:math build the library of dart.
    Login or Signup to reply.
  2. 0

    you could use RotatedBox widget something like the following:

    class NewButton extends StatelessWidget {
  const NewButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("App Today")),
      body: Column(
        children: [
          GestureDetector(
            onTap: () {},
            child: Container(
              width: 40,
              height: 100,
              decoration: BoxDecoration(
                  color: Color.fromARGB(255, 54, 105, 247),
                  borderRadius:
                      BorderRadius.horizontal(right: Radius.circular(20)),
                  border: Border.all(
                      width: 2.0, color: Color.fromARGB(221, 8, 1, 24))),
              child: const RotatedBox(
                  quarterTurns: 1,
                  child: Text('REGISTER',
                      style: TextStyle(
                        fontSize: 18,
                        color: Colors.white,
                      ),
                      textAlign: TextAlign.center)),
            ),
          )
        ],
      ),
    );
  }
}

    example picture

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search