Generating Fake Data in Flutter

Afzal Mehndi

13 November 2024

In app development, things are not different: testing your application with real data can be a pain. This is something where fake data generation can be helpful.

In this blog post we will create a simple UI and fake data in Flutter which looks like as an output below.

Why Generate Fake Data?

Testing: to create fake users that will pretend to interact with the app without any need for real user data
Develop: Useful for quick prototypes by Developers of UI Factories.
Performance: allows the app to work with different scales of data

Implementation

Firstly, Create A New Project And Add dependencies Into the Pubspec.yaml file as

faker: ^2.2.0

1	faker: ^2.2.0

Create a new Stateless Widget (FakeUserList) and add code for UI as shown below:-

class FakeUserList extends StatelessWidget {
  List<UserData> users = [];

  List<UserData> generateFakeUsers(int count) {
    final faker = Faker();
    return List.generate(count, (index) {
      return UserData(
        name: faker.person.name(),
        email: faker.internet.email(),
        address: faker.address.streetAddress(),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    users = generateFakeUsers(10);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Fake User List'),
      ),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          final user = users[index];
          return ListTile(
            title: Text(user.name),
            subtitle: Text('${user.email}\n${user.address}'),
            isThreeLine: true,
          );
        },
      ),
    );
  }
}

class FakeUserList extends StatelessWidget {

List<UserData> users = [];

List<UserData> generateFakeUsers(int count) {

final faker = Faker();

return List.generate(count, (index) {

return UserData(

name: faker.person.name(),

email: faker.internet.email(),

address: faker.address.streetAddress(),

);

});

}

@override

Widget build(BuildContext context) {

users = generateFakeUsers(10);

return Scaffold(

appBar: AppBar(

title: const Text('Fake User List'),

body: ListView.builder(

itemCount: users.length,

itemBuilder: (context, index) {

final user = users[index];

return ListTile(

title: Text(user.name),

subtitle: Text('${user.email}\n${user.address}'),

isThreeLine: true,

);

}

In the above example code we have create basic UI to display the random generated users list in app as :-

The FakeUserList is a stateless widget, meaning it doesn’t maintain any internal state.
final List<User> users: Here, we generate a list of 10 fake users using our generateFakeUsers function. This list is stored in the users variable.
faker.person.name(): Generates a random name, typically formatted as “First Last”.
faker.internet.email(): Generates a random email address. This usually includes a random name and a domain.
faker.internet.password(): Creates a random password, often including a mix of letters, numbers, and symbols.
faker.address.streetAddress(): Generates a random street address.