How use flexible widget to divide my screen into 2 - flutter

Question

I would like to divide my screen into 2 using the Flexible Widget. The first flexible widget I would like to set is 80% as yellow and blue for the remaining 20%. Is there any way of dividing it using the flexible widget as I would like to have the remaining 20% of empty space in blue colour.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("BitCoin cryptocurrency ")),
body: SingleChildScrollView(
child: Column(
children: [
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
"BitCoin cryptocurrency",
style:
TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
controller: valueEditingController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'Bitcoin Value',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)))),
),
DropdownButton(
itemHeight: 60,
value: selectLoc,
onChanged: (newValue) {
setState(() {
selectLoc = newValue.toString();
});
},
items: locList.map((selectLoc) {
return DropdownMenuItem(
child: Text(
selectLoc,
),
value: selectLoc,
);
}).toList(),
),
ElevatedButton(
onPressed: _loadWeather, child: const Text("Load Value")),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FittedBox(
child: Text(
// description,
nu,
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 25),
),
),
FittedBox(
child: Text(
nu2,
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 25),
),
),
FittedBox(
child: Text(
nu3,
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 25),
),
),//FittedBox
],
),//Column
),//Padding
],
)),//Cloumn //Centre
],
),//Column
)// SingleChildScrollView
);//Scaffold
}
Sorry for any inconvenience.

Answer 1

You can do it by using the Flexible widget with the flex attribute at flex 8 and flex 2
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Fexible widget'),
), //AppBar
body: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
children: <Widget>[
Flexible(
flex: 8,
fit: FlexFit.loose,
child: Container(
color: Colors.yellow,
), //Container
), //Flexible
Flexible(
flex: 2,
fit: FlexFit.loose,
child: Container(
color: Colors.blue,
), //Container
) //Flexible
//Row
//Row
], //<Widget>[]
),
),
],
),
), //Scaffold
debugShowCheckedModeBanner: false,
),
); //MaterialApp
}