How to put two containers on the same screen without page scrolling?-CodePudding

I have a search page. I display 2 containers with information on the search page. But I ran into a problem, my bottom station container goes off the screen and I need to scroll the page to see the information. How can I put 2 containers on the screen and not have to scroll the page so that 2 containers fit on the same screen?

Widget _addresses(Size size, StationCubit stationCubit) => ConstrainedBox(
        constraints: BoxConstraints(
          maxHeight: MediaQuery.of(context).size.height / 2,
        ),
        child: SizedBox(
          width: size.width,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(24),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
              child: Container(
                  padding: const EdgeInsets.only(left: 20, top: 17),
                  decoration: BoxDecoration(
                    color: constants.Colors.greyXDark.withOpacity(0.8),
                    borderRadius: BorderRadius.circular(24),
                  ),
                  child: SingleChildScrollView(
                    controller: _addressesController,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Text(
                          'Addresses',
                          style: constants.Styles.smallBookTextStyleWhite,
                        ),
                        const SizedBox(height: 25),

Widget _station(Size size, StationCubit stationCubit) => ConstrainedBox(
        constraints: BoxConstraints(
          maxHeight: MediaQuery.of(context).size.height / 2,
        ),
        child: SizedBox(
          width: size.width,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(24),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
              child: Container(
                padding: const EdgeInsets.only(left: 20, top: 17),
                decoration: BoxDecoration(
                  color: constants.Colors.greyXDark.withOpacity(0.8),
                  borderRadius: BorderRadius.circular(24),
                ),
                child: SingleChildScrollView(
                  controller: _stationController,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        'Station',
                        style: constants.Styles.smallBookTextStyleWhite,
                      ),

CodePudding user response：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            Expanded(
              child: Container(
                  color: Colors.deepPurple,

                  child: ListView.builder(itemBuilder: (c, i) {
                    return Text("Test $i");
                  })),
            ),
            Expanded(
              child: Container(
                  color: Colors.deepOrange,

                  child: ListView.builder(itemBuilder: (c, i) {
                    return Text("Test $i");
                  })),
            ),
          ],
        ));
  }
}

CodePudding user response：

Try placing both containers in column and wrap both container with flexible/expanded to expand containers in full screen.

Example code:

column(
children: [
 Expanded(
  child: Container(child: Text("Container 1")
 ),
 Expanded(
  child: Container(child: Text("Container 2")
 )
]
)

CodePudding user response：

Use 2 Expanded container in single column

column( children: [ Expanded( child: Container(child: Text("Container 1") ), Expanded( child: Container(child: Text("Container 2") ) ] ).

CodePudding user response：

Abdul Rahman Panhyar your answer is right but Max need to show data came from any API so there is a chance of bulk data and just wrapping the container with expanded will disrupt the UI. so what is suggest you can divide your screen in two parts then in each part you can use Listview builder so it will be inner scrollable.