Module 6: Text, Images, and Buttons

The Content Widgets That Make Screens Worth Looking At

Layout widgets are the skeleton. Text, images, and buttons are the skin, the face, and the handshake.

Text and TextStyle: More Than Just Words

At its simplest, Text takes a string:

Text('Hello, Flutter!')

But the real power is in TextStyle:

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    letterSpacing: 1.5,
    fontStyle: FontStyle.italic,
    decoration: TextDecoration.underline,
  ),
)

The TextStyle Properties You'll Use Most

Text Overflow

What happens when text is too long? You control it:

Text(
  'This is a very long piece of text that might not fit on a single line...',
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

TextOverflow.ellipsis adds "..." when text is clipped. Other options: clip (just cuts off), fade (fades out), visible (overflows visibly).

RichText: Multiple Styles in One Block

Sometimes you need one word bold, another word colored, and the rest normal -- all in the same sentence. That's RichText with TextSpan:

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(color: Colors.black, fontSize: 18),
    children: [
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.blue,
        ),
      ),
      TextSpan(text: '! Welcome aboard.'),
    ],
  ),
)

The parent TextSpan sets the default style. Children inherit that style and can override specific properties. The children flow inline -- no line breaks between them -- just like words in a sentence.

When to Use RichText vs. Multiple Text Widgets

Use RichText when styled text should flow together as a paragraph. Use separate Text widgets when items are distinct elements that need their own layout (like a title and subtitle stacked vertically).

Images: From the Internet and Your App

Images make apps feel alive. Flutter gives you two main ways to load them.

Image.network: Loading from the Internet

Image.network(
  'https://picsum.photos/200',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

This fetches an image from the internet and displays it. Simple. The fit property controls how the image fills its container:

Image.asset: Bundled with Your App

For images shipped with your app, put them in an assets/images/ folder and register them in pubspec.yaml:

flutter:
  assets:
    - assets/images/

Then load them:

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

Asset images load instantly (no network delay) and work offline.

ClipRRect: Rounded Image Corners

Want rounded corners on an image? Wrap it in ClipRRect:

ClipRRect(
  borderRadius: BorderRadius.circular(12),
  child: Image.network(
    'https://picsum.photos/200',
    width: 200,
    height: 200,
    fit: BoxFit.cover,
  ),
)

Icons and IconButton

Icons

Icon(Icons.favorite, color: Colors.red, size: 30)
Icon(Icons.star, color: Colors.amber, size: 24)
Icon(Icons.home, color: Colors.blue, size: 32)

The Icons class has hundreds of options. In your IDE, type Icons. and scroll through autocomplete to explore.

IconButton

An icon that responds to taps:

IconButton(
  onPressed: () {
    print('Heart tapped!');
  },
  icon: Icon(Icons.favorite),
  color: Colors.red,
  iconSize: 32,
)

IconButton adds a circular ink splash effect on tap. It's the standard way to make icons interactive.

Buttons: The Right Button for the Job

Flutter's Material button types follow a hierarchy of visual emphasis:

ElevatedButton: Primary Actions

The most visually prominent button. Raised with a shadow. Use for the main action on a screen.

ElevatedButton(
  onPressed: () { print('Buy now!'); },
  child: Text('Buy Now'),
)

TextButton: Low-Emphasis Actions

Flat, no background, no border. Use for secondary actions or in dialogs.

TextButton(
  onPressed: () { print('Learn more'); },
  child: Text('Learn More'),
)

OutlinedButton: Medium-Emphasis Actions

Has a border but no fill. Visually between elevated and text.

OutlinedButton(
  onPressed: () { print('Add to cart'); },
  child: Text('Add to Cart'),
)

FloatingActionButton: The Standout

A circular button that floats above the content. Typically one per screen for the primary action.

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () { print('Add!'); },
    child: Icon(Icons.add),
  ),
  body: ...,
)

Button Styling with styleFrom

All buttons can be customized with their styleFrom method:

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.teal,
    foregroundColor: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
    textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  ),
  child: Text('Styled Button'),
)

Notice the pattern: ElevatedButton.styleFrom(), TextButton.styleFrom(), OutlinedButton.styleFrom(). Each button type has its own styleFrom factory.

There Are No Dumb Questions

Q: Why does Flutter have so many button types? Can't I just style one button differently?

A: You could, but the different button classes encode design intent. When another developer reads your code, TextButton immediately communicates "this is a low-emphasis action." It also means the button automatically follows your app's theme correctly without manual styling.

Q: What's the difference between Image.network and Image.asset?

A: Image.network downloads from a URL at runtime -- it needs internet and has loading delay. Image.asset loads from files bundled in your app -- instant, works offline, but increases app size. Use network for user-generated content and dynamic images. Use assets for logos, icons, and images that never change.

Q: Can I make text selectable?

A: Yes! Use SelectableText instead of Text. It has the same API but lets users highlight and copy the text. Regular Text widgets are not selectable by default.

Q: How do I add a loading indicator while a network image loads?

A: Use the loadingBuilder parameter on Image.network, or use the FadeInImage widget which shows a placeholder while loading. We'll cover more advanced patterns later in the course.

Q: What if I want a button with both an icon and text?

A: All button types have an .icon constructor: ElevatedButton.icon(onPressed: ..., icon: Icon(Icons.add), label: Text('Add')).

Sharpen Your Pencil: Product Card

This is a meaty exercise that combines everything from this module -- and a few layout widgets from last module too. You'll build a product card that could sit in any shopping app.

Setup

flutter create text_images_buttons

Build lib/product_card.dart

Create a StatelessWidget called ProductCard that takes these parameters: - String name (required) - String description (required) - String imageUrl (required) - double price (required) - double rating (required)

The widget returns a Card with elevation: 4 and rounded corners (borderRadius: 12), with margin of 16. Inside:

1. An Image.network using imageUrl -- height 200, full width, BoxFit.cover, wrapped in ClipRRect with rounded top corners.

2. A Padding of 16 containing a Column (crossAxisAlignment: start):

3. Product name -- fontSize 20, bold
4. SizedBox(height: 4)
5. Rating row: rating.round() star icons (amber, size 18) followed by the rating as text (grey)
6. SizedBox(height: 8)
7. Description -- maxLines 2, ellipsis overflow, grey color
8. SizedBox(height: 12)
9. Price and buttons row (spaceBetween):
   • Price text -- fontSize 22, bold, teal
   • Three buttons: IconButton (favorite, red), OutlinedButton ("Details"), ElevatedButton ("Add to Cart", teal background)

Build lib/product_screen.dart

Create a ProductScreen with: - AppBar titled 'Shop' - FloatingActionButton with Icons.shopping_cart - Body: SingleChildScrollView with a Column of at least 3 ProductCard widgets using different data and https://picsum.photos/seed/productN/400/300 URLs

Wire up main.dart

Set ProductScreen as the home screen with primarySwatch: Colors.teal.

📝 Module Quiz

Test what you learned. 45 seconds per question. Passing score is set per module. Your best attempt is saved in your browser so you can track progress -- nothing is sent to a server.

Wrapping Up