How do I create elevatedbuttons over image in flutter? - flutter

Question

I have a boxdecoration with an image as my background, how do I place elevatedbuttons over it, like windows icons in a desktop?

Answer 1

I managed to get my result using a stack for my background with 02 positioned and then a scaffold for the foreground with the remaining widgets.
class _IngredientesState extends State<Ingredientes> {
#override
Widget build(BuildContext context) {
final Ingrediente ing = Ingrediente();
if (_loading == true) {
ing.init();
_loading = false;
}
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
return Stack(
children: [
Positioned(
child: SizedBox(
width: width,
child: Container(
color: cBakcGroundColor,
width: width,
height: height,
),
),
),
Positioned(
top: 100,
child: Opacity(
opacity: 0.2,
child: Image(
width: width,
image: const AssetImage(cBackgroundLogo),
),
),
),
const Foreground()
],
);
}
}
class Foreground extends StatefulWidget {
const Foreground({
Key? key,
}) : super(key: key);
#override
State<Foreground> createState() => _ForegroundState();
}
class _ForegroundState extends State<Foreground> {
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 18),
child: DefaultTextStyle(
style: GoogleFonts.oxygen(
color: Colors.black, fontSize: 20, fontWeight: FontWeight.w500),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 50),
const Text('Nome do Ingrediente'),
const SizedBox(height: 5),
TextField(
controller: _ingrediente,
decoration: InputDecoration(
border: outlineInputBorder,
enabledBorder: outlineInputBorder,
focusedBorder: outlineInputBorder,
hintText: 'Ex.: Farinha de trigo.'),
),
const SizedBox(height: 20),
const Text('Quantidade'),
const SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width * 0.5,
child: TextField(
controller: _iquantidade,
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
textAlign: TextAlign.right,
decoration: InputDecoration(
border: outlineInputBorder,
enabledBorder: outlineInputBorder,
focusedBorder: outlineInputBorder,
),
),
),
Container(
width: width * 0.2,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
border: Border.all(
color: cBorderColor,
style: BorderStyle.solid,
width: 0.80),
),
child: DropdownButton(
value: unidadeSelecionada,
icon: const Icon(Icons.keyboard_arrow_down),
items: unidadeIngrediente.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
unidadeSelecionada = newValue!;
});
},
),
),
),
],
),
const SizedBox(height: 20),
const Text('Valor pago'),
const SizedBox(height: 5),
Row(
children: [
Container(
width: width * 0.5,
child: TextField(
controller: _ipreco,
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
textAlign: TextAlign.right,
decoration: InputDecoration(
border: outlineInputBorder,
enabledBorder: outlineInputBorder,
focusedBorder: outlineInputBorder,
),
),
)
],
)
],
),
),
),
floatingActionButton: BuildSaveButton(context),
);
}
}