So I have this kind of design:

How can I achieve this in Flutter?

CodePudding user response：

You may need to use the

CodePudding user response：

Adding My Car's answer.
You can adjust icon's location by using 'Positioned' widget.

import 'package:flutter/material.dart';

const Color darkBlue = 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) {
    return Container(
      height: 150,
      width: 150,
      padding: const EdgeInsets.only(top: 10, left: 10),
      decoration: BoxDecoration(
        color: Colors.teal,
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Stack(
        children: const [
          Align(
            alignment: Alignment.topLeft,
            child: Text(
              "History",
              style: TextStyle(
                color: Colors.white,
                fontSize: 25,
              ),
            ),
          ),
          Positioned(
            right: -25,
            bottom: -25,
            child: Icon(
              Icons.history,
              color: Colors.cyan,
              size: 120,
            ),
          ),
        ],
      ),
    );
  }
}