Home > Software engineering >  Filling the whole screen with widgets
Filling the whole screen with widgets

Time:06-28

Want to have the Row and Column to fill the entire screen but there is a gap between. I suppose that its something with the appbar to do. There were 2 options I could think of one with Mediaquery but this seemed easier.

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(),
  body: Column(
    children: [
      Expanded([enter image description here][1]
        child: Column(
          children: [
            Text("Balance"),
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [
                  ...coins
                      .map((crypto) => CryptoCard(
                            coin: crypto["coin"],
                            name: crypto["name"],
                            value: crypto["value"],
                            nr: crypto["nr"],
                          ))
                      .toList(),
                ],
              ),
            ),
          ],
        ),
      ),
      Expanded(
        flex: 2,
        child: ListView.builder(
            itemCount: transfers.length,
            itemBuilder: (context, index) {
              return Trans(
                  url: transfers[index]["coin"],
                  transName: transfers[index]["name"],
                  amount: transfers[index]["value"]);
            }),
      ),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

CodePudding user response:

Add This Line:

mainAxisSize: MainAxisSize.max

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisSize: MainAxisSize.max, //add this line
        children: [
         Column(
            mainAxisSize: MainAxisSize.max,//add this line
              children: [
                Text("Balance"),
                SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    children: [
                      ...coins
                          .map((crypto) => CryptoCard(
                                coin: crypto["coin"],
                                name: crypto["name"],
                                value: crypto["value"],
                                nr: crypto["nr"],
                              ))
                          .toList(),
                    ],
                  ),
                ),
              ],
            ),
          
          Expanded(
            
            child: ListView.builder(
                itemCount: transfers.length,
                itemBuilder: (context, index) {
                  return Trans(
                      url: transfers[index]["coin"],
                      transName: transfers[index]["name"],
                      amount: transfers[index]["value"]);
                }),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );

CodePudding user response:

Scaffold(
  appBar: AppBar(),
  body: Column(
    mainAxisSize: MainAxisSize.max,
    children: [
      Text("Balance"),
      SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: [
            ...coins
                .map((crypto) => CryptoCard(
                      coin: crypto["coin"],
                      name: crypto["name"],
                      value: crypto["value"],
                      nr: crypto["nr"],
                    ))
                .toList(),
          ],
        ),
      ),
      Expanded(
        flex: 2,
        child: ListView.builder(
            itemCount: transfers.length,
            itemBuilder: (context, index) {
              return Trans(
                  url: transfers[index]["coin"],
                  transName: transfers[index]["name"],
                  amount: transfers[index]["value"]);
            }),
      ),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

Solved it by erasing 1 column and then it work without the mainaxissize

  • Related