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

ElevatedButton Position Changing method – Flutter

I have an Elevated Button which is on of the bottom of the Page and I am a beginner sorry for this silly doubts but i can’t figure out how to change the position of the button I dont know how to try positioned widget too. Kindly help me

I tried positioned widget but couldn’t do well can anyone help me with this. here is my full code.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Expanded(
                child: PageView.builder(
                    itemBuilder: (context, index)=> const OnBoardContent(
                        image: 'assets/splash-1.png',
                        description: "All under one roof with different approach"),
                ),
              ),
              SizedBox(
                height: 30,
                width: 200,
                child: ElevatedButton(
                  onPressed: (){},
                  child: const Text("Tap to get started"),
                ),
              ),
            ],
          )
        ),
      );
  }
}

class OnBoardContent extends StatelessWidget {
  const OnBoardContent({
    Key? key,
    required this.image,
    required this.description,
  }) : super(key: key);

  final String image, description;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const SizedBox(
          height: 160,
        ),
        const Text("Naz-Kearn",
            style: TextStyle(
              fontSize: 30,
              fontWeight: FontWeight.bold
            )),
        const Text("A simplify learning App",
        style: TextStyle(
          fontWeight: FontWeight.normal
        ),
        ),
        Image.asset(image),
        const SizedBox(
          height: 50,
        ),
        Text(description,
        textAlign: TextAlign.center,
        style: const TextStyle(fontWeight: FontWeight.normal),
        ),
      ],
    );
  }
}

Output of the above code

enter image description here

Tags:

3

Answers


  1. 0

    You can wrap your button with Padding widget which helps you to add padding as you like

    Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Expanded(
                child: PageView.builder(
                    itemBuilder: (context, index)=> const OnBoardContent(
                        image: 'assets/splash-1.png',
                        description: "All under one roof with different approach"),
                ),
              ),
             Padding(
              padding: EdgeInsets.all(8),
             child: SizedBox(
                height: 30,
                width: 200,
                child: ElevatedButton(
                  onPressed: (){},
                  child: const Text("Tap to get started"),
                ),
              ),),
            ],
          )
        ),
      );
  }
    Login or Signup to reply.
  2. 0

    You need your widgets in a stack if you want to use Positioned widget on them :

    import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Stack( //wrapped the whole column with a stack so that all the other widgets doesn't get disturbed
            children: [
              Column(
                children: [
                  Expanded(
                    child: PageView.builder(
                      itemBuilder: (context, index)=> const OnBoardContent(
                          image: 'assets/splash-1.png',
                          description: "All under one roof with different approach"),
                    ),
                  ),
                  
                ],
              ),
              Positioned(
                top: MediaQuery.of(context).size.height*0.7, //change the 0.7 part to any number you like
                child: SizedBox(
                  height: 30,
                  width: 200,
                  child: ElevatedButton(
                    onPressed: (){},
                    child: const Text("Tap to get started"),
                  ),
                ),
              ),
            ],
          )
      ),
    );
  }
}

class OnBoardContent extends StatelessWidget {
  const OnBoardContent({
    Key? key,
    required this.image,
    required this.description,
  }) : super(key: key);

  final String image, description;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const SizedBox(
          height: 160,
        ),
        const Text("Naz-Kearn",
            style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold
            )),
        const Text("A simplify learning App",
          style: TextStyle(
              fontWeight: FontWeight.normal
          ),
        ),
        Image.asset(image),
        const SizedBox(
          height: 50,
        ),
        Text(description,
          textAlign: TextAlign.center,
          style: const TextStyle(fontWeight: FontWeight.normal),
        ),
      ],
    );
  }
}

    try this code, you can use alignment property of the Stack widget to center everything.

     SafeArea(
          child: Stack( 
            alignment: Alignment.center, //do this
            children: [
    Login or Signup to reply.
  3. 0

    Firstly please mention what precisely the issue you are facing. If you have a problem with the get started button, what is the expected place for the get started button in the design?

    Based on the code given, I’m hoping that the get started button should be at the bottom of the screen with some space below. You have already placed the button at the bottom, but you are not able to give space below.

    There are some possible ways, you can use it with the get started button component.

    Instead of this,

    SizedBox(
 height: 30,
 width: 200,
 child: ElevatedButton(
   onPressed: (){},
   child: const Text("Tap to get started"),
 ),
),

    Option 1
    Use container with margin

    Container(
 height: 30,
 width: 200,
 margin: EdgeInsets.only(
   bottom: 50,
 ),
 child: ElevatedButton(
   onPressed: () {},
   child: const Text("Tap to get started"),
 ),
),

    Option 2
    Wrap existing SizedBox with padding widget

    Padding(
    padding: EdgeInsets.only(bottom: 50.0),
    child: Sizedbox(
     height: 30,
     width: 200,
     child: ElevatedButton(
       onPressed: () {},
       child: const Text("Tap to get started"),
     ),
    ),
   ),

    Even with some more ways to move the button wherever you need, you can try your own with the following widgets Expanded(), Spacer(), SizedBox(), Positioned() and etc.

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

Back To Top
Search