Flutter의 사용자 목록(User List) 화면 만들기

Flutter를 사용하여 앱을 개발할 때, 사용자 목록 화면은 유용하게 사용될 수 있는 중요한 기능입니다. 이 화면을 통해 사용자는 앱 내 다른 사용자들의 정보를 확인하고 상호작용할 수 있습니다. 이번 글에서는 Flutter에서 사용자 목록 화면을 구현하는 방법과 이를 커스터마이징하는 예제를 자세히 살펴보겠습니다.

1. 기본 사용자 목록 화면 구성

사용자 목록 화면을 구현하기 위해 ListView와 ListTile 위젯을 사용하여 기본적인 사용자 목록을 만듭니다. 다음은 기본적인 사용자 목록 화면을 구현한 예제입니다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserListScreen(),
    );
  }
}

class User {
  final String name;
  final String email;
  final String profileImageUrl;

  User({required this.name, required this.email, required this.profileImageUrl});
}

class UserListScreen extends StatelessWidget {
  final List<User> users = [
    User(name: 'John Doe', email: 'john.doe@example.com', profileImageUrl: 'https://via.placeholder.com/150'),
    User(name: 'Jane Smith', email: 'jane.smith@example.com', profileImageUrl: 'https://via.placeholder.com/150'),
    User(name: 'Bob Johnson', email: 'bob.johnson@example.com', profileImageUrl: 'https://via.placeholder.com/150'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User List'),
      ),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          final user = users[index];
          return ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage(user.profileImageUrl),
            ),
            title: Text(user.name),
            subtitle: Text(user.email),
            onTap: () {
              // Handle user tap
            },
          );
        },
      ),
    );
  }
}

 

위 코드는 기본적인 사용자 목록 화면을 구현한 예제입니다. ListView.builder를 사용하여 사용자 목록을 생성하고, 각 사용자 항목은 ListTile 위젯으로 구성됩니다.

 

728x90

 

2. 사용자 상세 정보 화면 구현

사용자 목록에서 특정 사용자를 클릭하면 해당 사용자의 상세 정보를 보여주는 화면을 구현할 수 있습니다. 다음은 사용자 상세 정보 화면을 추가한 예제입니다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserListScreen(),
    );
  }
}

class User {
  final String name;
  final String email;
  final String profileImageUrl;

  User({required this.name, required this.email, required this.profileImageUrl});
}

class UserListScreen extends StatelessWidget {
  final List<User> users = [
    User(name: 'John Doe', email: 'john.doe@example.com', profileImageUrl: 'https://via.placeholder.com/150'),
    User(name: 'Jane Smith', email: 'jane.smith@example.com', profileImageUrl: 'https://via.placeholder.com/150'),
    User(name: 'Bob Johnson', email: 'bob.johnson@example.com', profileImageUrl: 'https://via.placeholder.com/150'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User List'),
      ),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          final user = users[index];
          return ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage(user.profileImageUrl),
            ),
            title: Text(user.name),
            subtitle: Text(user.email),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => UserDetailsScreen(user: user),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class UserDetailsScreen extends StatelessWidget {
  final User user;

  UserDetailsScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(user.name),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CircleAvatar(
              radius: 50,
              backgroundImage: NetworkImage(user.profileImageUrl),
            ),
            SizedBox(height: 16),
            Text(
              user.name,
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text(
              user.email,
              style: TextStyle(fontSize: 16, color: Colors.grey),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                // Implement additional actions here
              },
              child: Text('Contact'),
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 사용자 목록에서 특정 사용자를 클릭하면 해당 사용자의 상세 정보를 보여주는 예제입니다. Navigator.push를 사용하여 상세 정보 화면으로 이동하며, UserDetailsScreen은 선택된 사용자의 정보를 표시합니다.

 

반응형

 

3. 사용자 목록 검색 기능 추가

사용자가 목록에서 특정 사용자를 쉽게 찾을 수 있도록 검색 기능을 추가할 수 있습니다. 다음은 사용자 목록에 검색 기능을 추가한 예제입니다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserListScreen(),
    );
  }
}

class User {
  final String name;
  final String email;
  final String profileImageUrl;

  User({required this.name, required this.email, required this.profileImageUrl});
}

class UserListScreen extends StatefulWidget {
  @override
  _UserListScreenState createState() => _UserListScreenState();
}

class _UserListScreenState extends State<UserListScreen> {
  final List<User> users = [
    User(name: 'John Doe', email: 'john.doe@example.com', profileImageUrl: 'https://via.placeholder.com/150'),
    User(name: 'Jane Smith', email: 'jane.smith@example.com', profileImageUrl: 'https://via.placeholder.com/150'),
    User(name: 'Bob Johnson', email: 'bob.johnson@example.com', profileImageUrl: 'https://via.placeholder.com/150'),
  ];

  List<User> filteredUsers;
  TextEditingController searchController = TextEditingController();

  @override
  void initState() {
    super.initState();
    filteredUsers = users;
    searchController.addListener(_filterUsers);
  }

  void _filterUsers() {
    final query = searchController.text.toLowerCase();
    setState(() {
      filteredUsers = users.where((user) {
        return user.name.toLowerCase().contains(query) || user.email.toLowerCase().contains(query);
      }).toList();
    });
  }

  @override
  void dispose() {
    searchController.removeListener(_filterUsers);
    searchController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User List'),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(56.0),
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: TextField(
              controller: searchController,
              decoration: InputDecoration(
                hintText: 'Search users...',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.0),
                  borderSide: BorderSide.none,
                ),
                filled: true,
                fillColor: Colors.white,
                contentPadding: EdgeInsets.symmetric(horizontal: 16.0),
              ),
            ),
          ),
        ),
      ),
      body: ListView.builder(
        itemCount: filteredUsers.length,
        itemBuilder: (context, index) {
          final user = filteredUsers[index];
          return ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage(user.profileImageUrl),
            ),
            title: Text(user.name),
            subtitle: Text(user.email),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => UserDetailsScreen(user: user),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class UserDetailsScreen extends StatelessWidget {
  final User user;

  UserDetailsScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(user.name),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CircleAvatar(
              radius: 50,
              backgroundImage: NetworkImage(user.profileImageUrl),
            ),
            SizedBox(height: 16),
            Text(
              user.name,
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text(
              user.email,
              style: TextStyle(fontSize: 16, color: Colors.grey),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                // Implement additional actions here
              },
              child: Text('Contact'),
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 사용자 목록에 검색 기능을 추가한 예제입니다. TextField를 사용하여 검색어를 입력받고, searchController를 통해 실시간으로 사용자 목록을 필터링합니다.

결론

Flutter에서 사용자 목록 화면을 구현하면 사용자가 앱 내 다른 사용자들과 상호작용할 수 있도록 도울 수 있습니다. ListView와 ListTile 위젯을 사용하여 기본적인 사용자 목록을 만들고, 상세 정보 화면과 검색 기능을 추가하여 사용자 경험을 향상시킬 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 매력적이고 기능적인 사용자 목록 화면을 구현해보세요. 사용자 목록 화면을 통해 사용자에게 유용한 정보를 제공할 수 있습니다.