Flutter Buttons Text Images

Buttons, text, and images are the three most visible elements in any mobile app. This topic covers how to use and customize each one effectively in Flutter.

Text Widget — Deep Dive

The Text widget displays a string. Style it with TextStyle.

Text(
  'Flutter Made Simple',
  style: TextStyle(
    fontSize: 28,
    fontWeight: FontWeight.bold,
    color: Colors.deepPurple,
    fontStyle: FontStyle.italic,
    letterSpacing: 1.2,
    decoration: TextDecoration.underline,
  ),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,  // Shows "..." when text is too long
)

RichText — Mixed Styles in One Line

Use RichText with TextSpan to style different parts of one sentence differently.

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: 'Price: ',
        style: TextStyle(color: Colors.black, fontSize: 16),
      ),
      TextSpan(
        text: '₹499',
        style: TextStyle(
          color: Colors.green,
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
)

  Result:  Price: ₹499
           ──────  ────
           black   green + bold

Button Types in Flutter

ElevatedButton — Raised with Shadow

ElevatedButton(
  onPressed: () {
    print('Submitted!');
  },
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 14),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('Submit'),
)

TextButton — Flat, No Background

TextButton(
  onPressed: () {},
  child: Text('Forgot Password?'),
)

OutlinedButton — Bordered, No Fill

OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    side: BorderSide(color: Colors.blue, width: 2),
  ),
  child: Text('Learn More'),
)

IconButton — Tappable Icon

IconButton(
  icon: Icon(Icons.share, color: Colors.blue),
  onPressed: () {
    print('Share tapped');
  },
)

FloatingActionButton (FAB) — Circular Action Button

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
)

Button Comparison

  ElevatedButton  → [  Submit  ]   (raised, filled)
  TextButton      →    Submit       (flat, no border)
  OutlinedButton  → [  Submit  ]   (border, no fill)
  IconButton      →    ⊕            (icon only)
  FAB             →   (➕)          (floating circle)

Disabled Buttons

Set onPressed to null to disable a button. Flutter greys it out automatically.

ElevatedButton(
  onPressed: null,  // Disabled — greyed out, not tappable
  child: Text('Submit'),
)

Image Widget

Flutter loads images from three sources: the internet, local assets, or device files.

Image from Internet

Image.network(
  'https://example.com/photo.jpg',
  width: 300,
  height: 200,
  fit: BoxFit.cover,
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return CircularProgressIndicator();
  },
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.broken_image, size: 50);
  },
)

Image from Local Assets

First, add the image to your project's assets folder, then register it in pubspec.yaml.

  pubspec.yaml:
  ───────────────
  flutter:
    assets:
      - assets/images/logo.png

Image.asset(
  'assets/images/logo.png',
  width: 100,
  height: 100,
)

BoxFit Options

  BoxFit.cover  → Fills the box, crops if needed
  BoxFit.contain → Fits inside box, adds empty space
  BoxFit.fill   → Stretches to fill (may distort)
  BoxFit.none   → Original size, no scaling

  ┌──────────┐  ┌──────────┐  ┌──────────┐
  │██████████│  │  ┌────┐  │  │▓▓┌────┐▓▓│
  │██ cover █│  │  │fit │  │  │▓▓│none│▓▓│
  │██████████│  │  └────┘  │  │▓▓└────┘▓▓│
  └──────────┘  └──────────┘  └──────────┘
  (cover)        (contain)     (none)

CircleAvatar — Circular Image

CircleAvatar(
  radius: 40,
  backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
)

Combining Text, Image, and Button — Product Card

Card(
  child: Column(
    children: [
      Image.network('https://example.com/shoe.jpg', height: 150, fit: BoxFit.cover),
      Padding(
        padding: EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Running Shoes', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            SizedBox(height: 4),
            Text('₹2,499', style: TextStyle(color: Colors.green, fontSize: 16)),
            SizedBox(height: 12),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () {},
                child: Text('Add to Cart'),
              ),
            ),
          ],
        ),
      ),
    ],
  ),
)

  ┌──────────────────────────┐
  │    [Product Image]       │
  ├──────────────────────────┤
  │  Running Shoes           │
  │  ₹2,499                  │
  │  [───── Add to Cart ────]│
  └──────────────────────────┘