Why is my date field not fitting into my Flutter UI?

AI
February 24, 2023
278 views
2 votes
3 Answers

I want to make this design (only the top part)

This is what I have tried

As you can see, dueDate is unable to show in full. What is the better way to write it? My code as below:

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

    import '../domain/model/invoice.dart';
    
    class InvoiceDetailsScreen extends HookWidget {
      final Invoice invoice;
    
      const InvoiceDetailsScreen(this.invoice, {super.key});
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: _showDetails(),
          appBar: AppBar(elevation: 0, title: const Text("Invoice")),
        );
      }
    
      Widget _showDetails() {
        return SingleChildScrollView(
            child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Align(
                alignment: Alignment.topRight,
                child: Column(
                  children: [const Text("INVOICE"), const Text("#1111111111")],
                )),
            const Text("AAAAAAAA BBBBBBB CCCCCC"),
            Row(children: [
              const Expanded(
                  child:
                      Text("164,Jalan Lang Perut 10, Selangor, Malaysia")),
              const Spacer(),
              Column(children: [const Text("Balance Due"), const Text("MYR 100")])
            ]),
            const SizedBox(height: 15),
            const Text("Receipient"),
            const SizedBox(height: 15),
            const Text("DDDD DDDDD DDDDD"),
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
              const Expanded(
                  child:
                      Text("124,Jalan Lang Perut 5, Selangor, Malaysia")),
                      const Spacer(),
              Expanded(
                  child: Column(
                children: [
                  Row(
                    children: [const Text("Invoice Date:"), const Text("12 MAY ")],
                  ),
                  Row(
                    children: [const Text("Termas:"), const Text("12 MAY ")],
                  ),
                  Row(
                    children: [const Text("Due Date:"), const Text("12 MAY ")],
                  ),
                ],
              ))
            ]),
          ]),
        ));
      }
    }

Tags: flutter row

Answers

try adding expanded in the Rows to the last column

example:

                             Column(
                                children: [
                                  Expanded(
                                    child: Row(
                                      children: [
                                        const Text("Invoice Date:"),
                                        const Text("12 MAY ")
                                      ],
                                    ),
                                  ),
                                  Expanded(
                                    child: Row(
                                      children: [
                                        const Text("Termas:"),
                                        const Text("12 MAY ")
                                      ],
                                    ),
                                  ),
                                  Expanded(
                                    child: Row(
                                      children: [
                                        const Text("Due Date:"),
                                        const Text("12 MAY ")
                                      ],
                                    ),
                                  ),
                                ],
                              ),

and i’m pretty sure that if you remove the padding it will fix the overflow problem

Use this code

Widget _showDetails() {
    return SingleChildScrollView(
      child: Padding(
      padding: const EdgeInsets.all(10),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Align(
            alignment: Alignment.topRight,
            child: Column(
              children: const [Text("INVOICE"), Text("#1111111111")],
            )),
        const Text("AAAAAAAA BBBBBBB CCCCCC"),
        Row(children: [
          const Expanded(
              child: Text("164,Jalan Lang Perut 10, Selangor, Malaysia")),
          const Spacer(),
          Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: const [Text("Balance Due"), Text("MYR 100")])
        ]),
        const SizedBox(height: 15),
        const Text("Receipient"),
        const SizedBox(height: 15),
        const Text("DDDD DDDDD DDDDD"),
        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          const Expanded(
              child: Text("124,Jalan Lang Perut 5, Selangor, Malaysia")),
          // const Spacer(),
          Expanded(
              child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: const [Text("Invoice Date:"), Text("12 MAY ")],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: const [Text("Termas:"), Text("12 MAY ")],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: const [Text("Due Date:"), Text("12 MAY ")],
              ),
            ],
          ))
        ]),
      ]),
    ));
  }

Just removing Expanded from last Row worked:

Widget _showDetails() {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Align(
              alignment: Alignment.topRight,
              child: Column(
                children: const [Text("INVOICE"), Text("#1111111111")],
              ),
            ),
            const Text("AAAAAAAA BBBBBBB CCCCCC"),
            Row(
              children: [
                const Expanded(
                  child: Text("164,Jalan Lang Perut 10, Selangor, Malaysia"),
                ),
                const Spacer(),
                Column(
                  children: const [
                    Text("Balance Due"),
                    Text("MYR 100"),
                  ],
                ),
              ],
            ),
            const SizedBox(height: 15),
            const Text("Receipient"),
            const SizedBox(height: 15),
            const Text("DDDD DDDDD DDDDD"),
            Row(
              children: [
                const Expanded(
                  child: Text("124,Jalan Lang Perut 5, Selangor, Malaysia"),
                ),
                const Spacer(),
                Column(
                  children: [
                    Row(
                      children: const [
                        Text("Invoice Date:"),
                        Text("12 MAY ")
                      ],
                    ),
                    Row(
                      children: const [
                        Text("Termas:"),
                        Text("12 MAY "),
                      ],
                    ),
                    Row(
                      children: const [
                        Text("Due Date:"),
                        Text("12 MAY "),
                      ],
                    ),
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );
  }

Please signup or login to give your own answer.

Click here to cancel reply.