Is there any way to make such design in Flutter - flutter-layout

Question

As shown in the below Image.
I want an image at the bottom of the stack, a container above it and a transparent text widget above them. I'm unable to figure out any solution, please help!

Answer 1

Found a solution, works like a charm
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
class Penumbra extends StatefulWidget {
Penumbra({Key key}) : super(key: key);
#override
_PenumbraState createState() => _PenumbraState();
}
class _PenumbraState extends State<Penumbra> {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: Stack(
children: [
Row(
children: [
Container(
width: size.width / 2,
height: double.maxFinite,
color: Color(0xff181818),
),
Container(
width: size.width / 2,
height: double.maxFinite,
color: Colors.white,
)
],
),
SingleChildScrollView(
child: Column(
children: [
Container(
height: size.height,
),
ImageShaderWidget(),
Container(
height: size.height,
),
],
),
),
],
));
}
}
class ImageShaderWidget extends StatelessWidget {
#override
Widget build(BuildContext context) => Container(
child: FutureBuilder<TextStyle>(
future: loadImage(
TextStyle(fontSize: 104.0, fontWeight: FontWeight.w900)),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else {
return Text(
"Penumbra",
style: snapshot.data,
);
}
},
),
);
Future<TextStyle> loadImage(TextStyle textStyle) async {
final imageBytes = await rootBundle.load('../assets/images/background.jpg');
ui.Image img = await decodeImageFromList(imageBytes.buffer.asUint8List());
Float64List matrix4 = new Matrix4.identity().storage;
return textStyle.copyWith(
foreground: Paint()
..shader =
ImageShader(img, TileMode.mirror, TileMode.mirror, matrix4));
}
}