I'm trying to resposively align 2 items which are an animated text and a robot image, in the image robot has a display screen and the text should always be aligned in the robot's screen, looking forward for some tips, thanks in advance.
@override
Widget build(BuildContext context) {
return Container(
decoration: mainTheme(),
child: Scaffold(
body: Container(
padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 0),
// Robot Image
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/My project-1.png'),
fit: BoxFit.cover,
alignment: Alignment.bottomLeft,
opacity: 0.6,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
//
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text(
//Page Title
),
child: TextFormField( //
),
Row(
children: [
Padding(
//Funny Animated Text
padding: EdgeInsets.only(
left: MediaQuery.of(context).size.width * .67,
),
child: ClipRRect(
child: Align(
widthFactor: 0.14,
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Transform.translate(
offset: Offset(
MediaQuery.of(context).size.width *
_animation.value,
0.9),
child: child,
);
},
child: Text()
I tried many diffrent alignments but everytime when ı changed the aspect ratio, whole thing broke apart.