Profile page tiktok flutter

Here is an example of a TikTok profile page in Flutter:

ProfilePage.dart

import 'package:flutter/material.dart';
import 'package:your_app/models/user.dart';

class ProfilePage extends StatelessWidget {
  final User user;

  ProfilePage({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(user.username),
      ),
      body: ListView(
        children: [
          // Profile picture
          CircleAvatar(
            radius: 50,
            backgroundImage: NetworkImage(user.profilePictureUrl),
          ),
          // Bio
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              user.bio,
              style: TextStyle(fontSize: 16),
            ),
          ),
          // Followers and following counts
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text(
                '${user.followersCount} followers',
                style: TextStyle(fontSize: 16),
              ),
              Text(
                '${user.followingCount} following',
                style: TextStyle(fontSize: 16),
              ),
            ],
          ),
          // Posts
          ListView.builder(
            shrinkWrap: true,
            itemCount: user.posts.length,
            itemBuilder: (context, index) {
              return PostCard(post: user.posts[index]);
            },
          ),
        ],
      ),
    );
  }
}

class PostCard extends StatelessWidget {
  final Post post;

  PostCard({required this.post});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          // Post image
          Image.network(post.imageUrl),
          // Post caption
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              post.caption,
              style: TextStyle(fontSize: 16),
            ),
          ),
          // Post likes and comments
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text(
                '${post.likesCount} likes',
                style: TextStyle(fontSize: 16),
              ),
              Text(
                '${post.commentsCount} comments',
                style: TextStyle(fontSize: 16),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

User.dart

class User {
  final String username;
  final String profilePictureUrl;
  final String bio;
  final int followersCount;
  final int followingCount;
  final List<Post> posts;

  User({
    required this.username,
    required this.profilePictureUrl,
    required this.bio,
    required this.followersCount,
    required this.followingCount,
    required this.posts,
  });
}

Post.dart

class Post {
  final String imageUrl;
  final String caption;
  final int likesCount;
  final int commentsCount;

  Post({
    required this.imageUrl,
    required this.caption,
    required this.likesCount,
    required this.commentsCount,
  });
}

This code assumes you have a User model with properties for the user's username, profile picture URL, bio, followers count, following count, and a list of posts. The Post model has properties for the post's image URL, caption, likes count, and comments count.

The ProfilePage widget displays the user's profile picture, bio, followers and following counts, and a list of their posts. Each post is displayed as a PostCard widget, which shows the post's image, caption, likes and comments counts.

Note that this is just an example and you will need to modify the code to fit your specific use case. You will also need to implement the logic for fetching the user's data and posts from your backend API.