Make Flutter Container Responsive - flutter

Question

I am trying to make an app and I have used a container and a column widget under a stack widget but the width of the container and the positioned widget of a column widget are not updating according to the screen sizes.
Screenshot:
Please check the demo code given below and re-edit the code. Thank you.
code
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
return Center(
child: Container(
height: 135,
width: width,
decoration: BoxDecoration(
border: Border.all(color: Colors.yellow),
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Stack(
children: <Widget>[
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Stack(
children: <Widget>[
Image.network(
'https://images3.alphacoders.com/823/82317.jpg',
fit: BoxFit.cover,
height: 120,
width: 120,
),
],
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 15, 5, 0),
child: Container(
width: width * 0.6,
height: 110,
child: const Text(
'product.name',
textAlign: TextAlign.justify,
style: TextStyle(fontSize: 17),
),
),
),
],
),
),
Positioned(
top: 80,
left: width * 0.85,
child: Column(
children: const [
Text(
'Rs200',
style:
TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
),
Text(
'Rs300',
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 17,
color: Colors.blueGrey),
),
],
),
),
],
)),
);
}
}

Answer 1

You should try this :
Container(
margin: EdgeInsets.all(16.0),
height: 135,
width: double.infinity,
decoration: BoxDecoration(
border: Border.all(color: Colors.yellow),
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Stack(
children: <Widget>[
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Stack(
children: <Widget>[
Image.network(
'https://images3.alphacoders.com/823/82317.jpg',
fit: BoxFit.cover,
height: 120,
width: 120,
),
],
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(50, 15, 5, 0),
child: Container(
height: 110,
child: const Text(
'product.name',
textAlign: TextAlign.justify,
style: TextStyle(fontSize: 17),
),
),
),
],
),
),
Positioned(
top: 80,
right: 20,
child: Column(
children: const [
Text(
'Rs200',
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold),
),
Text(
'Rs300',
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 17,
color: Colors.blueGrey),
),
],
),
),
],
),
),
And your screen look like this -

Answer 2

There is no need to use of any Stack. I think you can do things using the row and column widget, check out the example that i have added below let me know if it work.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
height: 135,
decoration: BoxDecoration(
border: Border.all(color: Colors.yellow),
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Stack(
children: <Widget>[
Image.network(
'https://images3.alphacoders.com/823/82317.jpg',
fit: BoxFit.cover,
height: 120,
width: 120,
),
],
),
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 15, 5, 0),
child: const Text(
'asdfnweoriwqer qweroiqwoer qweruqwoer sadfsdf dfsdf ',
textAlign: TextAlign.justify,
style: TextStyle(fontSize: 17),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text(
'Rs200',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold),
),
Text(
'Rs300',
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 17,
color: Colors.blueGrey),
),
],
),
),
],
),
],
),
),
],
)),
),
);
}
}
Layout Explanation:
There will be one row which will have two items 1) image and another will be a column.
Now the Column will have expanded widget to get max width.
Column childern will have two row widget one product name and another price row which will have Column as widget for text.
we have used row to take the max width.
For the Text to expand accordingly you have to add the expanded widget inside the row widget so that it scales based on the text that is coming.
Note : Please add padding according to your need.
Let me know if it works.

Answer 3

First of all, you have used so many redundant widgets which do not serve any purpose except making the code look ugly and complex. I have refactored the code and have used the least number of widgets while fulfilling your requirement:
Demo on the action: https://dartpad.dev/?null_safety=true&id=75d503fcbe2bdb0e8b37ff21fc284a30
Gist link: https://gist.github.com/omishah/75d503fcbe2bdb0e8b37ff21fc284a30 ( Do give star if this works for you. :) )
I have made the image also responsive which you can remove if you don't want to have it.
Complete code:
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Scaffold(
body: IntrinsicHeight(
child: Container(
margin: EdgeInsets.all(
8.0), // just to make the contianer stand out, you can remove it
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.yellow),
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
fit: BoxFit.cover,
height:
width * 0.25, // 25% of screen width
width: width * 0.25,
),
),
SizedBox(width: 15),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'product.name',
style: TextStyle(fontSize: 17),
),
Align(
alignment: Alignment.centerRight,
child: Wrap(direction: Axis.vertical, children: [
Text(
'Rs200',
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold),
),
Text(
'Rs300',
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 17,
color: Colors.blueGrey),
),
]))
])),
],
),
)));
}
}