Home > Blockchain >  how i can change place of ElevatedButton
how i can change place of ElevatedButton

Time:03-19

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          leading: const Icon(Icons.home),
          automaticallyImplyLeading: true,
          title: const Text('test app'),
          foregroundColor: Colors.black,
          actions: [
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.menu),
            ),
          ],
        ),
        body: Container(
          child: Column(

            children: [
              Row(
                children: [
                  const Text(
                    'New',
                    style: TextStyle(
                        color: Colors.black54,
                        fontSize: 40,
                        fontWeight: FontWeight.bold,
                        fontStyle: FontStyle.italic,
                        height: 2,
                        shadows: [
                          Shadow(color: Colors.black12, offset: Offset(4, 10))
                        ]),
                  ),
                  ElevatedButton.icon(onPressed: (){}, icon: Icon(Icons.navigate_next),label: Text(' '),
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.grey),
                      
                    ),
                  ),


                ],
              ),
              Row(),
            ],
          ),
        ),
      ),
    );
  }

image

CodePudding user response:

use the Row widget properties for laying out its childrens

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [....]
 )

the official docs are helpful in that matter https://api.flutter.dev/flutter/widgets/Row-class.html

  • sidenote: if you are not planning to use any of the first container() properties then its better to get rid of it

CodePudding user response:

There are 4 options u can use depending on what you want

  1. If u want it below new u can use Column instead of Row .

  2. If u want to put some space next to new u can use SizedBox(width:X) between the Text and the elevated button.

  3. You can use mainAxisAlignment or crossAxisAlignment inside the row or column to customize the position you can find examples about them here https://docs.flutter.dev/development/ui/layout

  4. you can use margin or padding on elevated button to customize its own position

  • Related