add text and button in a background image flutter

February 11, 2022

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

}

>Solution :

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