Flutter Display Widgets: Showing Content

Display widgets are fundamental to presenting content in Flutter applications. This comprehensive guide explores various display widgets and demonstrates how to use them effectively.

1. Text Widgets

Basic Text Display

The Text widget is the foundation for displaying textual content.

class TextDisplayExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Simple Text',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: Colors.black87,
          ),
        ),
        SizedBox(height: 8),
        Text(
          'This is a longer text that demonstrates wrapping behavior. It will automatically wrap to the next line when it reaches the edge of its container.',
          style: TextStyle(
            fontSize: 16,
            color: Colors.black54,
            height: 1.5,
          ),
        ),
      ],
    );
  }
}

Rich Text

RichText and TextSpan allow for mixed text styling.

class RichTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        style: DefaultTextStyle.of(context).style,
        children: [
          TextSpan(
            text: 'Flutter ',
            style: TextStyle(
              color: Colors.blue,
              fontWeight: FontWeight.bold,
            ),
          ),
          TextSpan(
            text: 'makes it easy to create ',
          ),
          TextSpan(
            text: 'beautiful',
            style: TextStyle(
              color: Colors.green,
              fontStyle: FontStyle.italic,
            ),
          ),
          TextSpan(
            text: ' applications!',
          ),
        ],
      ),
    );
  }
}

2. Image Widgets

Network Images

Display images from the internet with error handling and loading states.

class NetworkImageExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      child: Image.network(
        'https://example.com/image.jpg',
        fit: BoxFit.cover,
        loadingBuilder: (context, child, loadingProgress) {
          if (loadingProgress == null) return child;
          return Center(
            child: CircularProgressIndicator(
              value: loadingProgress.expectedTotalBytes != null
                  ? loadingProgress.cumulativeBytesLoaded /
                      loadingProgress.expectedTotalBytes!
                  : null,
            ),
          );
        },
        errorBuilder: (context, error, stackTrace) {
          return Container(
            color: Colors.grey[200],
            child: Icon(
              Icons.error_outline,
              color: Colors.red,
              size: 48,
            ),
          );
        },
      ),
    );
  }
}

Asset Images

Display images from your application's assets.

class AssetImageExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/background.png'),
          fit: BoxFit.cover,
        ),
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 8,
            offset: Offset(0, 4),
          ),
        ],
      ),
    );
  }
}

3. Icon Widgets

Material Icons

Use built-in Material Design icons.

class IconExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Column(
          children: [
            Icon(
              Icons.favorite,
              color: Colors.red,
              size: 32,
            ),
            Text('Favorite'),
          ],
        ),
        Column(
          children: [
            Icon(
              Icons.star,
              color: Colors.amber,
              size: 32,
            ),
            Text('Star'),
          ],
        ),
        Column(
          children: [
            Icon(
              Icons.share,
              color: Colors.blue,
              size: 32,
            ),
            Text('Share'),
          ],
        ),
      ],
    );
  }
}

Custom Icons

Create and use custom icons in your application.

class CustomIconExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconTheme(
      data: IconThemeData(
        size: 24,
        color: Theme.of(context).primaryColor,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ImageIcon(
            AssetImage('assets/icons/custom_icon.png'),
          ),
          SizedBox(width: 8),
          Text('Custom Icon'),
        ],
      ),
    );
  }
}

4. Advanced Display Widgets

Placeholder

Use placeholders during development or loading states.

class PlaceholderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      child: Column(
        children: [
          Placeholder(
            fallbackHeight: 200,
            color: Colors.blue.withOpacity(0.5),
            strokeWidth: 2,
          ),
          SizedBox(height: 16),
          Row(
            children: [
              Expanded(
                child: Placeholder(
                  fallbackHeight: 100,
                  color: Colors.green.withOpacity(0.5),
                ),
              ),
              SizedBox(width: 16),
              Expanded(
                child: Placeholder(
                  fallbackHeight: 100,
                  color: Colors.orange.withOpacity(0.5),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

FadeInImage

Create smooth image loading transitions.

class FadeInImageExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      child: FadeInImage.assetNetwork(
        placeholder: 'assets/images/placeholder.gif',
        image: 'https://example.com/image.jpg',
        fit: BoxFit.cover,
        fadeInDuration: Duration(milliseconds: 500),
        fadeInCurve: Curves.easeIn,
      ),
    );
  }
}

5. Best Practices

1. Performance Optimization

• Use const constructors when possible
• Implement caching for network images
• Handle image loading and errors gracefully

class OptimizedImageDisplay extends StatelessWidget {
  final String imageUrl;
  final double width;
  final double height;

  const OptimizedImageDisplay({
    Key? key,
    required this.imageUrl,
    required this.width,
    required this.height,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
      imageUrl: imageUrl,
      width: width,
      height: height,
      fit: BoxFit.cover,
      placeholder: (context, url) => Container(
        color: Colors.grey[200],
        child: Center(
          child: CircularProgressIndicator(),
        ),
      ),
      errorWidget: (context, url, error) => Container(
        color: Colors.grey[200],
        child: Icon(Icons.error),
      ),
    );
  }
}

2. Accessibility

Ensure your display widgets are accessible to all users.

class AccessibleImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Semantics(
      label: 'A beautiful landscape photo',
      image: true,
      child: Image.asset(
        'assets/images/landscape.jpg',
        width: 300,
        height: 200,
      ),
    );
  }
}

3. Responsive Design

Create display widgets that adapt to different screen sizes.

class ResponsiveDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          return _buildWideLayout();
        } else {
          return _buildNarrowLayout();
        }
      },
    );
  }

  Widget _buildWideLayout() {
    return Row(
      children: [
        Expanded(child: _buildImage()),
        SizedBox(width: 16),
        Expanded(child: _buildContent()),
      ],
    );
  }

  Widget _buildNarrowLayout() {
    return Column(
      children: [
        _buildImage(),
        SizedBox(height: 16),
        _buildContent(),
      ],
    );
  }

  Widget _buildImage() {
    return AspectRatio(
      aspectRatio: 16 / 9,
      child: Image.asset(
        'assets/images/content.jpg',
        fit: BoxFit.cover,
      ),
    );
  }

  Widget _buildContent() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Title',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 8),
        Text(
          'Description goes here...',
          style: TextStyle(fontSize: 16),
        ),
      ],
    );
  }
}

By mastering these display widgets and following the best practices, you can create visually appealing and functional Flutter applications that effectively present content to your users.