How to replicate (this) specific Android constraint layout on Flutter - flutter

Question

I want to find a solution to mimic attached image Android contraint layout on a Flutter wrapped widgets structure.
In this case, blue text TextView width is wrap content and image (dollar sign) must take same width.
Any suggestions? Thanks a lot!
This is my current code, a simple column, I tried a lot of alternatives but I can't figure it out logically :/
Widget _getPublisherLogoImage() {
return ClipOval(
child: CachedNetworkImage(
imageUrl: _publisherLogo,
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
width: 50,
height: 50,
),
);
}
Widget _getNewsItemHour(BuildContext context) {
return Padding(
padding: EdgeInsets.only(top: 8),
child: Text(DateUtils.getHoursMinutesStringDate(_timestamp),//'09:35',
style: TextStyle(
fontSize: 14,
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold))
);
}
Widget _getNewsItemQuotation() {
return Padding(
padding: EdgeInsets.only(top: 8),
child: Text('\$$_price',
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.bold))
);
}
.
.
.
Column(
children: <Widget>[
_getPublisherLogoImage(),
_getNewsItemHour(context),
_getNewsItemQuotation()
],
)
.
.
.

Answer 1

To match the text to the image, I use a technique where an IntrinsicWidth widget wraps a Column, whose crossAxisAlignment is stretched.
Change the image width in the code from width: 200 to whatever you want, and the text underneath will match its size.
P.S. The second text widget at the bottom of the screen scales to the screen size.
Code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Replicate Android Layout',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Replicate Android Layout')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
_getPublisherLogoImage(),
FittedBox(
fit: BoxFit.fitWidth, child: _getNewsItemHour(context)),
],
),
),
_getNewsItemQuotation(context),
],
),
),
);
}
}
Widget _getPublisherLogoImage() {
return Image(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
width: 200,
);
}
Widget _getNewsItemHour(BuildContext context) {
return Padding(
padding: EdgeInsets.only(top: 10),
child: Text('09.35',
style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.normal)));
}
Widget _getNewsItemQuotation(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double _price = 60.59;
return Text(
'\$$_price',
style: TextStyle(
fontSize: width * 0.25,
color: Colors.grey,
),
);
}
Run in dartpad.