Search code examples
flutterandroid-studiodartmobile-application

ElevatedButton Position Changing method


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


Solution

  • 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"),
                    ),
                  ),),
                ],
              )
            ),
          );
      }