width not set after Transform.scale - flutter

Question

Unable to change the width after "Transform.scale"?
In the following sample code, the red Container, do not change width after setting fitWidth(width of container) when pressing the floatingbutton.
Only if it is les than MediaQuery.of(context).size.width.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
// State
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
Matrix4 matrix = Matrix4.identity();
double fitWidth;
#override
void initState() {
fitWidth = 0;
super.initState();
}
double getSizeWidth(BuildContext context) {
if (fitWidth != 0) {
return fitWidth;
} else {
return MediaQuery.of(context).size.width;
}
}
Widget build(BuildContext context) {
var sizWidth = getSizeWidth(context);
print(sizWidth);
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: Transform.scale(
scale: 0.5,
child: Container(
color: Colors.red,
width: sizWidth,
height: 400,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
fitWidth = 800;
});
// Add your onPressed code here!
},
backgroundColor: Colors.green,
));
}
}

Answer 1

its works for me
Widget build(BuildContext context) {
print(sizWidth);
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: Transform.scale(
scale: 0.5,
child: Container(
color: Colors.red,
width: fitWidth != 0?fitWidth:MediaQuery.of(context).size.width,
height: 400,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
fitWidth = 800;
});
// Add your onPressed code here!
},
backgroundColor: Colors.green,
));
}
cheers...

Answer 2

try this,
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
Matrix4 matrix = Matrix4.identity();
double widthScale = 0.0;
#override
void initState() {
super.initState();
}
double getSizeWidth(BuildContext context) {
if (widthScale != 0.0) {
return widthScale;
} else {
return 1.0;
}
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: Transform(
alignment: Alignment.center,
transform: new Matrix4.identity()..scale(getSizeWidth(context), 0.5),
child: Container(
color: Colors.red,
width: MediaQuery.of(context).size.width,
height: 400,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
widthScale = 0.5;
});
// Add your onPressed code here!
},
backgroundColor: Colors.green,
));
}
}

Answer 3

Give alignment(Align)
Transform.scale(
scale: 0.5,
child: Center( // or Align
child: Container(
color: Colors.red,
width: sizWidth,
height: 400,
),
),
)