Flutter - Align widget all the way to the end of a card view. (View image included)

Question

how can I get the flat button to fill the area under the divider all the way to the end of the card, it appears to not be able to go any further down.

See the white space under the FlatButton? I want it to look like the FlatButton is the end.

Doesn't have to be a flat button, any widget with onTap/press/(or a something hack-ish with gesture detector) listener would be fine.

Dart code is ->

Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: Card(
        elevation: 5,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(15))
        ),
        child: Container(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 24, bottom: 16),
                child: Text(_label, style: TextStyle(fontSize: 24, color: Color.fromARGB(190, 0, 0, 0), fontWeight: FontWeight.bold)),
              ),
              Divider(color: Colors.black26, height: 2,),
              Padding(
                padding: const EdgeInsets.all(24.0),
                child: Text(_information, style: TextStyle(fontSize: 20, color: Colors.black87)),
              ),
              Divider(color: Colors.black26, height: 2,),
              SizedBox(width: double.infinity, child: FlatButton(onPressed: () => _onTap(), color: Color.fromARGB(50, 100, 100, 100), child: Text('Done', style: TextStyle()), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5))))
            ],
          ),
        ),
      ),
    );
  }

Answer 1

I solved my code like this, setting a height factor it did what i wanted automatically.

SizedBox(width: double.infinity, height: 60, child: 
FlatButton(onPressed: () => _onTap(), color: Colors.transparent, child: 
Text('Done', style: TextStyle()), shape: RoundedRectangleBorder(borderRadius: 
BorderRadius.only(bottomLeft: Radius.circular(15), bottomRight: Radius.circular(15)))))

Only downside is that you have to specify a height rather than letting the widget adjust that based on content. Although there is probably a workaround for that.

Answer 2

Please see the code below, I'm using InkWell & Container :

import 'package:flutter/material.dart';

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String _label = "";
    String _information = "";
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: Card(
        elevation: 5,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(15))),
        child: Container(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 24, bottom: 16),
                child: Text(_label,
                    style: TextStyle(
                        fontSize: 24,
                        color: Color.fromARGB(190, 0, 0, 0),
                        fontWeight: FontWeight.bold)),
              ),
              Divider(
                color: Colors.black26,
                height: 2,
              ),
              Padding(
                padding: const EdgeInsets.all(24.0),
                child: Text(_information,
                    style: TextStyle(fontSize: 20, color: Colors.black87)),
              ),
              Divider(
                color: Colors.black26,
                height: 2,
              ),
              Spacer(),
              InkWell(
                onTap: () {}, //_onTap(),
                child: Container(
                  width: double.infinity,
                  height: 40,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      color: const Color.fromARGB(50, 100, 100, 100)),
                  child: const Center(child: Text('Done', style: TextStyle())),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}