Solid Flutter - Single Responsibility Principle Example

gistfile1.txt

import 'package:flutter/material.dart';

// Bad Example: A widget that does too much
class BadSocialMediaPostWidget extends StatelessWidget {
  final String username;
  final String postContent;
  final String imageUrl;
  final int likes;
  final List<String> comments;

  BadSocialMediaPostWidget({
    required this.username,
    required this.postContent,
    required this.imageUrl,
    required this.likes,
    required this.comments,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          ListTile(
            leading: CircleAvatar(child: Text(username[0])),
            title: Text(username),
          ),
          Image.network(imageUrl),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Text(postContent),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('$likes likes'),
              IconButton(
                icon: Icon(Icons.thumb_up),
                onPressed: () {
                  // Handle like functionality
                },
              ),
            ],
          ),
          Expanded(
            child: ListView.builder(
              itemCount: comments.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(comments[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

// Good Example: Breaking down into smaller, focused widgets
class GoodSocialMediaPostWidget extends StatelessWidget {
  final String username;
  final String postContent;
  final String imageUrl;
  final int likes;
  final List<String> comments;

  GoodSocialMediaPostWidget({
    required this.username,
    required this.postContent,
    required this.imageUrl,
    required this.likes,
    required this.comments,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          UserHeader(username: username),
          PostImage(imageUrl: imageUrl),
          PostContent(content: postContent),
          LikeSection(likes: likes),
          CommentSection(comments: comments),
        ],
      ),
    );
  }
}

class UserHeader extends StatelessWidget {
  final String username;

  UserHeader({required this.username});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: CircleAvatar(child: Text(username[0])),
      title: Text(username),
    );
  }
}

class PostImage extends StatelessWidget {
  final String imageUrl;

  PostImage({required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Image.network(imageUrl);
  }
}

class PostContent extends StatelessWidget {
  final String content;

  PostContent({required this.content});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(content),
    );
  }
}

class LikeSection extends StatelessWidget {
  final int likes;

  LikeSection({required this.likes});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('$likes likes'),
        IconButton(
          icon: Icon(Icons.thumb_up),
          onPressed: () {
            // Handle like functionality
          },
        ),
      ],
    );
  }
}

class CommentSection extends StatelessWidget {
  final List<String> comments;

  CommentSection({required this.comments});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ListView.builder(
        itemCount: comments.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(comments[index]),
          );
        },
      ),
    );
  }
}