Home > Software design >  Flutter: How can create two columns with one scrollable?
Flutter: How can create two columns with one scrollable?

Time:07-13

I have this kind of Flutter code snippet.

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(50),
              child: Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: Column(
                      children: const [
                        DateSelection(),
                        SizedBox(height: 100),
                        ReportSummaries(),
                      ],
                    ),
                  ),
                  const SizedBox(width: 50),
                  Expanded(
                    flex: 2,
                    child: CustomTable(results: results), // This should be scrollable.
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

How can I make the CustomTable scrollable? The CustomTable has Flutter's DataTable underneath it.

CodePudding user response:

Try this layout

SizedBox(
 height: MediaQuery.of(context).size.height,
 width: MediaQuery.of(context).size.width,
 child: Row(
   children: [
    Expanded(
     flex: 1,
     child: Column(
      children: [], //non scrollable Column
     )
    ),
    Expanded(
     flex: 2,
     child: SingleChildScrollView (
      child: Column(
       mainAxisSize: MainAxisSize.min,
       children: [], // scrollable Column
      )
     )
    )
   ]
  )
)
  • Related