flutter – Card with image and text

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
      MaterialApp(
          theme: ThemeData(primarySwatch: Colors.indigo),
          home: Scaffold(
              appBar: AppBar(
                  title: const Text("Flutter - Card With Image & Text")
              ),
              body: bodyContent()
          )
      )
  );
}

bodyContent(){
  return Card(
      elevation: 6,
      margin: const EdgeInsets.all(12),
      child: Padding(
          padding: const EdgeInsets.all(16),
          child: Container(
              width: double.infinity,
              height: 200,
              decoration: const BoxDecoration(
                  image: DecorationImage(
                      image: NetworkImage("https://picsum.photos/600"),
                      fit: BoxFit.cover
                  )
              ),
              child: Container(
                  alignment: Alignment.bottomRight,
                  padding: const EdgeInsets.all(12),
                  child: const Text(
                      "Some Text",
                      style: TextStyle(
                          fontSize: 30,
                          fontWeight: FontWeight.bold,
                          color: Colors.white70
                      )
                  )
              )
          )
      )
  );
}

More flutter tutorials

• flutter – Card elevation
• flutter – Card shadow
• flutter – Card padding
• flutter – Card with image
• flutter – Card circle image
• flutter – Card circle image padding
• flutter – Card rounded corners image
• flutter – Container decoration image
• flutter – Container clip behavior
• flutter – How to use InkResponse
• flutter – Column full width
• flutter – Column align left
• flutter – Column center
• flutter – Column items stretch horizontally
• flutter – Column height wrap content