CODEWITHSUNDEEP
androidflutterdartmobilematerial-design
Raka M.A
Raka M.A

Reputation: 275

How to put an icon in the bottom right edge of container in flutter

So I have this kind of design:

My Card

How can I achieve this in Flutter?

Upvotes: 1

Views: 1293

Answers (2)

KuKu
KuKu

Reputation: 7512

Adding My Car's answer.

You can adjust icon's location by using Positioned widget.

Result

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,
            ),
          ),
        ],
      ),
    );
  }
}

Upvotes: 3

My Car
My Car

Reputation: 4566

You may need to use the Stack widget:

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),
        ),
      ),
      Align(
        alignment: Alignment.bottomRight,
        child: Icon(
          Icons.history,
          color: Colors.cyan,
          size: 75,
        ),
      ),
    ],
  ),
),

Image

Upvotes: 5

Related Questions