Add a button to a Container

Question

This is my Code:

import 'dart:convert';

import 'package:flutter/material.dart';

class OverViewList extends StatefulWidget {
  OverViewList({Key key}) : super(key: key);

  @override
  _OverViewListState createState() => _OverViewListState();
}

class _OverViewListState extends State<OverViewList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      body: Center(
        child: Container(
          child: FutureBuilder(
            builder: (context, snapshot) {
              var showData = json.decode(snapshot.data.toString());
              if (snapshot.hasData) {
                return ListView.builder(
                  itemCount: showData.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Padding(
                      padding: EdgeInsets.fromLTRB(12, 0, 12, 0),
                      child: Card(
                        child: ListTile(
                          contentPadding: EdgeInsets.fromLTRB(8, 5, 5, 5),
                          title: Padding(
                            padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
                            child: Text(showData[index]["Product_Name"]),
                          ),
                          subtitle: Text("Vorhanden: " +
                              showData[index]["Stock"] +
                              "\n" +
                              "Verdirbt am " +
                              showData[index]["Expiry_date"]),
                        ),
                      ),
                    );
                  },
                );
              }

              return CircularProgressIndicator();
            },
            future: DefaultAssetBundle.of(context).loadString(
                "lib/global/Overview_Products/Overview_Product.json"),
          ),
        ),
      ),
    );
  }
}

I have already tried a bit around, but have not found a solution. With 'row' or 'columnß' I have also already gebeiotet. However, this does not quite work with the listview. The button should be visible above the listview, floating, in a kind of bar at the bottom. It should be look like this: An example of what it should look like

Where do you want the Button? Do you want a button at the end of each individual ListTime or below the ListView? — bluenile, Dec 12 '20 at 20:42
The CircularProgressIndicator is not shown after the view list, because it is shown meanwhile the file is loading. You should write : if ( shapshot.hasData) {---- } else { return CircularProgressIndicator(...) ; } to be more clear. — Mike, Dec 12 '20 at 20:43
In the ListBuilder Flutter shows a list of ListView items ( built in the builder function). Thus if you want to add a widget for every item you should wrap the widgets : Padding -> Card -> ListTile with a Column(...) or Flex(...), where you can specify which item should Expand. — Mike, Dec 12 '20 at 20:47
Thanks, but as i have edited i only want to have one Button, wich is independent to how many tiles i have in my list, to "add" or "refresh" the list, something like this. — Vito, Dec 12 '20 at 20:59

score 0 · Accepted Answer · answered Dec 12 '20 at 23:32

0

You could use the column, adding shrinkWrap:true to the listView should be enough to avoid overflow

answered Dec 12 '20 at 23:32

Luis Utrera

942
6
15

It´s under the listview or above, but not over it. Also the Listview isn´t scrollable anymore and if there are to many items, there is an overflow. Thanks always – Vito Dec 13 '20 at 08:00
Adding SingleChildScrollVIew at the toppest level should solve the overflow, and adding physics should resolve scrolling problem – Luis Utrera Dec 13 '20 at 11:34

score 0 · Answer 2 · answered Dec 13 '20 at 11:31

0

If am not wrong you need a floating action button and you should check that article => FloatingActionButton class

answered Dec 13 '20 at 11:31

Kaloglu

1,651
1
20
31

Add a button to a Container

2 Answers2