Skip to content

Unwanted spaces around the zoom widget while using column widget #39

Description

@GowthamanRavichandran

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

image

Example Code

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),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions