title: How can I design this layout in FLUTTER
body: <p>I am developing a clone of functionality where shopkeepers can enter their daily Cashoutgoings and cash incomings but I am having trouble designing the layout. Basically, I want to show different entries in their respective columns.
  Here is the code and the snapshots of my project</p>
  <pre><code>class CashInCashOut extends StatefulWidget {
    const CashInCashOut({Key? key}) : super(key: key);
  
    @override
    _CashInCashOutState createState() =&gt; _CashInCashOutState();
  }
  
  class _CashInCashOutState extends State&lt;CashInCashOut&gt; {
    final _firestore = FirebaseFirestore.instance;
    DateTime date = DateTime.now();
    late var formattedDate = DateFormat('d-MMM-yy').format(date);
    late String amountCashout;
    late String detailCashOut;
    late String dateCashOut;
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text(&quot;Cash Out&quot;),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              TextField(
                onChanged: (value) {
                  amountCashout = value;
                },
                keyboardType: TextInputType.phone,
                decoration: InputDecoration(labelText: &quot;Amount&quot;),
              ),
              TextField(
                onChanged: (value) {
                  detailCashOut = value;
                },
                decoration: InputDecoration(labelText: &quot;Detail (optional)&quot;),
              ),
              const SizedBox(
                height: 28.0,
              ),
              Row(
                children: [
                  ElevatedButton.icon(
                    label: Text(formattedDate),
                    icon: const Icon(Icons.date_range_outlined),
                    onPressed: () async {
                      DateTime? _newDate = await showDatePicker(
                        context: context,
                        initialDate: date,
                        firstDate: DateTime(2022),
                        lastDate: DateTime(2030),
                      );
                      setState(() {
                        if (_newDate == null) {
                          return;
                        } else {
                          formattedDate = DateFormat('d-MMM-yy').format(_newDate);
                        }
                      });
                    },
                  ),
                  const Spacer(),
                  // ReusableButton(text: &quot;Add bills&quot;),
                ],
              ),
              const Spacer(),
              ReusableButton(
                text: 'Save',
                onpress: () =&gt; _firestore.collection('cashOut').add(
                  {
                    'amount': amountCashout,
                    'optionalDetail': detailCashOut,
                    'datereceived': formattedDate
                  },
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  
  class CaShBookRegister extends StatefulWidget {
    const CaShBookRegister({Key? key}) : super(key: key);
  
    @override
    _CaShBookRegisterState createState() =&gt; _CaShBookRegisterState();
  }
  
  class _CaShBookRegisterState extends State&lt;CaShBookRegister&gt; {
    final _firestore = FirebaseFirestore.instance;
  
    void streamFromFirebase() async {
      await for (var snapshot in _firestore.collection('cashOut').snapshots()) {
        for (var receivedStream in snapshot.docs) {
          print(receivedStream.data());
        }
      }
    }
  
    DateTime date = DateTime.now();
    late var formattedDate = DateFormat('d-MMM-yy').format(date);
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 18.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              const SizedBox(
                height: 16.0,
              ),
              Padding(
                padding: const EdgeInsets.all(14.0),
                child: Row(
                  children: [
                    Expanded(
                      child: ReuseableCard(
                        textcolour: Colors.white,
                        buttonColour: Colors.green,
                        text: &quot;Cash in hand&quot;,
                      ),
                    ),
                    const SizedBox(
                      width: 8.0,
                    ),
                    Expanded(
                      child: ReuseableCard(
                        buttonColour: Colors.red,
                        textcolour: Colors.white,
                        text: &quot;Today's balance&quot;,
                      ),
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(14.0),
                child: Row(
                  children: [
                    Column(
                      children: [
                        Text(formattedDate),
                      ],
                    ),
                    const Spacer(),
                    const Text('Cash in'),
                    const Spacer(),
                    const Text('Cash out'),
                  ],
                ),
              ),
              const Divider(
                thickness: 1,
              ),
              const Spacer(),
              Padding(
                padding: const EdgeInsets.all(14.0),
                child: Row(
                  children: [
                    Expanded(
                        child: ReusableButton(
                      onpress: streamFromFirebase,
                      text: &quot;Cash out&quot;,
                    )),
                    const SizedBox(
                      width: 8.0,
                    ),
                    Expanded(
                      child: ReusableButton(
                        text: &quot;Cash in&quot;,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>I am using cloud fire store for storing my data and then retrieving it using STREAM Builder, but not being able to figure out how to display the respective entries in their respective columns. The first two snapshots are of my project and the third one is the functionality i want to acheive</p>
  <p>Snap shot of my project</p>
  <p><a href="https://i.stack.imgur.com/aK3pg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aK3pg.jpg" alt="Snap shot of my project" /></a></p>
  <p><a href="https://i.stack.imgur.com/2YkiE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2YkiE.jpg" alt="Snap shot of my project" /></a></p>
  <p>Snapshot of functionality I want to achieve</p>
  <p><a href="https://i.stack.imgur.com/31joB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/31joB.jpg" alt="Snapshot of functionality I want to achieve" /></a></p>