'how i can change place of ElevatedButton

 @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



Solution 1:[1]

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sinan Ammar
Solution 2 Yassine Haddaj