How can I force a Widget to take the available Space around it, no matter the shape?

Question

For context, I want to create something like this:

I already am this far:

How can I force the Container(Or any widget, in the end it should work as a different colored button) to take this shape? This is the code for only the card you see:

class ChooseUsageCardOffline extends StatelessWidget {
  final h;
  final w;
  ChooseUsageCardOffline({this.h, this.w});
  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1.4,
      child: Card(
          color: cc.dark_2,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(30)),
            side: BorderSide(color: cc.dark_3),
          ),
          child: FlatButton(
           onPressed: () {},
           child: Padding(
             padding: EdgeInsets.fromLTRB(0, h/35, w/100, 0),
               child: Column(
               mainAxisAlignment: MainAxisAlignment.start,
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 Row(
                   children: [
                     Align(
                       alignment: Alignment.bottomLeft,
                       child: Text("OFFLINE", style: TextStyle(color: cc.light_1, fontWeight: FontWeight.w500, fontSize: h / 18)
                        )
                       ),
                       SizedBox(width: w * 0.23),
                      Align(
                       alignment: Alignment.topRight,
                       child: Icon(Icons.device_hub, size: w * 0.15, color: cc.light_2,)
                       ), 
                   ],
                 ),
                 SizedBox(height: h / 50),
                 Text("Maximum Security, edit data Anywhere you are", style: TextStyle(color:cc.light_2, fontSize: h/40),),
                 SizedBox(height: h / 13),
                Expanded(
                  child:Container(color: Colors.blue,)
                )
                  
               ],
             ),
           )
        ),
      ),
    );
  }
}

Answer 1

To make your widget resize itself to the boundaries of its parent widget, wrap it with a FittedBox() widget. Check this video on Flutter's official channel for more detail.

The code is like this:

child: FittedBox(
  fit: Boxfit.fill, // Since you want it to take the shape of space around it.
  child: YourWidget(
  //...
  ),
),

Answer 2

The problem is that the padding is applied all the children of the column including the lower container.

You need to remove the padding from around the column, and apply it to each widget separately excluding the lower container.

Then, on the Card widget, you need to add a clipBehavior: Clip.hardEdge to get the rounded edges correctly.

Here's a simple example that you can copy and try out on dartpad.dev:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Container(
          height: 400,
          width: 300,
          child: Card(
            clipBehavior: Clip.hardEdge,
            color: Colors.black,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(30)),
              side: BorderSide(color: Colors.blue),
            ),
            child: Column(
              children: [
                Expanded(child: Container()),
                Container(height: 40, color: Colors.red),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 3

class ChooseUsageCardOffline extends StatelessWidget {
  final h;
  final w;
  ChooseUsageCardOffline({this.h, this.w});
  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1.4,
      child: Card(
        color: Colors.red,
        clipBehavior: Clip.antiAlias, // Add clip type.
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(30)),
          side: BorderSide(color: Colors.green),
        ),
        child: FlatButton(
          padding: EdgeInsets.all(0), // Remove default padding in FlatButton
            onPressed: () {},
            child: Padding(
              padding: EdgeInsets.fromLTRB(0, h/35, w/100, 0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Align(
                          alignment: Alignment.bottomLeft,
                          child: Text("OFFLINE", style: TextStyle(color: Colors.red, fontWeight: FontWeight.w500, fontSize: h / 18)
                          )
                      ),
                      SizedBox(width: w * 0.23),
                      Align(
                          alignment: Alignment.topRight,
                          child: Icon(Icons.device_hub, size: w * 0.15, color: Colors.red,)
                      ),
                    ],
                  ),
                  SizedBox(height: h / 50),
                  Text("Maximum Security, edit data Anywhere you are", style: TextStyle(color:Colors.red, fontSize: h/40),),
                  SizedBox(height: h / 13),
                  Expanded(
                      child:Container(color: Colors.blue,)
                  )

                ],
              ),
            )
        ),
      ),
    );
  }
}