I have a requirement where I need to include some widgets above and below the zoom widget. I attempted to add these widgets using the Column widget, but when I placed them above and below the zoom widget, I noticed that there is some gray-colored space added on the left and right sides, as shown in the screenshot below. I have provided an example of my code for your reference. I also tried using the bottomNavigationBar, but encountered the same issue.
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: LayoutBuilder(
builder: (p0, p1) => Column(
children: [
Expanded(
child: SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Zoom(
initTotalZoomOut: true,
maxZoomHeight: MediaQuery.of(context).size.height,
maxZoomWidth: (MediaQuery.of(context).size.width),
child: SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Center(
child: Container(
color: Colors.orange,
child: const Text(
'Plants communicate with neighbouring plants to activate an airborne defence against aphids. However, the genetic pathway underlying this defence mechanism is unknown. A signalling cascade centred around the gaseous form of the chemical methyl salicylate was found to control this interaction between plants.'))),
),
),
),
),
Container(
height: 50,
color: Colors.green,
child: Row(
children: [
Expanded(child: Container()),
const Padding(
padding: EdgeInsets.only(right: 20),
child: Text(
'Click Me',
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
],
),
),
],
),
),
),
),
);
}
}
I have a requirement where I need to include some widgets above and below the zoom widget. I attempted to add these widgets using the Column widget, but when I placed them above and below the zoom widget, I noticed that there is some gray-colored space added on the left and right sides, as shown in the screenshot below. I have provided an example of my code for your reference. I also tried using the bottomNavigationBar, but encountered the same issue.
Screenshot
Example Code