add text and button in a background image flutter-CodePudding

I'm a student new to flutter. I want to add a Text and a button on this background image. how should I do that using flutter. appreciate your help on this.

text -"Hello there"
button - Get Started

image description

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    class GetStarted extends StatelessWidget {
      const GetStarted({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            color: Colors.black,
            child: Stack(
              children: [
                Positioned.fill(
                  child: Opacity(
                    opacity: 0.4,
                    child:
                        Image.asset('assets/images/person1.png', fit: BoxFit.cover),
                  ),
                )
              ],
            ),
          ),
        );
      }

}

CodePudding user response：

You can just add the other widgets to the Stack and wrap them in an Align to put them where you want them.

Stack(
  children: [
    Positioned.fill(
      child: Opacity(
        opacity: 0.4,
        child: Image.asset('assets/images/person1.png', fit: BoxFit.cover),
      ),
    ),
    Align(
      alignment: Alignment.bottomCenter,
      child: ElevatedButton(child: Text('Button'), onPressed: () {})
    ),
    Text('ABC'),
  ],
),

https://api.flutter.dev/flutter/widgets/Align-class.html

https://api.flutter.dev/flutter/widgets/Stack-class.html

CodePudding user response：

Hello Nidew here is a SImple And Basic Example what you want...

hope this will resolve your issue

Scaffold(
      body: Stack(
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Image.asset('assets/images/app_icon.png',fit: BoxFit.fill,),
          ),
          Column(
            children: [
              const Align(alignment: Alignment.topLeft,child: Text('Hello',style: TextStyle(fontSize: 50,fontWeight: FontWeight.bold),)),
              const Spacer(),
              const Align(alignment: Alignment.centerLeft,child: Text('Hello Second Text')),
              const Spacer(),

              Padding(
                padding: const EdgeInsets.only(bottom: 20),
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: ElevatedButton(
                    onPressed: (){

                    },
                    child: const Text('Press me'),
                    style: ElevatedButton.styleFrom(
                      minimumSize: Size(MediaQuery.of(context).size.width,40)
                    ),
                  ),
                ),
              )
            ],
          ),
        ],
      ),
    )