Flutter의 프로필 화면(Profile Screen) 만들기

Flutter를 사용하여 앱을 개발할 때, 프로필 화면은 사용자에게 중요한 정보를 제공하고, 개인화된 기능을 사용할 수 있도록 도와주는 핵심 요소입니다. 이번 글에서는 Flutter에서 프로필 화면을 구현하는 방법과 이를 커스터마이징하는 예제를 자세히 살펴보겠습니다.

1. 기본 프로필 화면 구성

프로필 화면을 구현하기 위해 Flutter에서 제공하는 다양한 위젯을 사용할 수 있습니다. 다음은 기본적인 프로필 화면을 구현한 예제입니다.

 

import 'package:flutter/material.dart';

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

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

class ProfileScreen extends StatelessWidget {
  final String profileImageUrl = 'https://via.placeholder.com/150';
  final String name = 'John Doe';
  final String email = 'john.doe@example.com';

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

 

 

위 코드는 기본적인 프로필 화면을 구현한 예제입니다. CircleAvatar 위젯을 사용하여 프로필 이미지를 표시하고, Text 위젯을 사용하여 이름과 이메일을 표시합니다. ElevatedButton 위젯을 사용하여 프로필 편집 버튼을 추가합니다.

 

728x90

 

2. 프로필 정보 편집 기능 추가

프로필 화면에 사용자가 자신의 정보를 편집할 수 있는 기능을 추가할 수 있습니다. 다음은 프로필 편집 기능을 추가한 예제입니다.

 

import 'package:flutter/material.dart';

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

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

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  String profileImageUrl = 'https://via.placeholder.com/150';
  String name = 'John Doe';
  String email = 'john.doe@example.com';

  void _editProfile() async {
    final updatedProfile = await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => EditProfileScreen(
          name: name,
          email: email,
        ),
      ),
    );

    if (updatedProfile != null) {
      setState(() {
        name = updatedProfile['name'];
        email = updatedProfile['email'];
      });
    }
  }

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

class EditProfileScreen extends StatefulWidget {
  final String name;
  final String email;

  EditProfileScreen({required this.name, required this.email});

  @override
  _EditProfileScreenState createState() => _EditProfileScreenState();
}

class _EditProfileScreenState extends State<EditProfileScreen> {
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _nameController.text = widget.name;
    _emailController.text = widget.email;
  }

  void _saveProfile() {
    Navigator.pop(context, {
      'name': _nameController.text,
      'email': _emailController.text,
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Profile'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _nameController,
              decoration: InputDecoration(labelText: 'Name'),
            ),
            SizedBox(height: 16),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _saveProfile,
              child: Text('Save'),
            ),
          ],
        ),
      ),
    );
  }
}

 

 

위 코드는 프로필 편집 기능을 추가한 예제입니다. EditProfileScreen이라는 별도의 화면을 만들어 사용자가 이름과 이메일을 편집할 수 있도록 합니다. 편집된 정보는 Navigator.pop을 통해 이전 화면으로 전달됩니다.

 

반응형

3. 프로필 화면 커스터마이징

프로필 화면에 더 많은 정보를 추가하거나, 스타일을 개선하여 사용자 경험을 향상시킬 수 있습니다. 다음은 추가적인 프로필 정보와 스타일을 적용한 예제입니다.

 

import 'package:flutter/material.dart';

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

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

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  String profileImageUrl = 'https://via.placeholder.com/150';
  String name = 'John Doe';
  String email = 'john.doe@example.com';
  String phone = '123-456-7890';
  String address = '123 Main St, Anytown, USA';

  void _editProfile() async {
    final updatedProfile = await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => EditProfileScreen(
          name: name,
          email: email,
          phone: phone,
          address: address,
        ),
      ),
    );

    if (updatedProfile != null) {
      setState(() {
        name = updatedProfile['name'];
        email = updatedProfile['email'];
        phone = updatedProfile['phone'];
        address = updatedProfile['address'];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            CircleAvatar(
              radius: 50,
              backgroundImage: NetworkImage(profileImageUrl),
            ),
            SizedBox(height: 16),
            Text(
              name,
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text(
              email,
              style: TextStyle(fontSize: 16, color: Colors.grey),
            ),
            SizedBox(height: 8),
            Text(
              phone,
              style: TextStyle(fontSize: 16, color: Colors.grey),
            ),
            SizedBox(height: 8),
            Text(
              address,
              style: TextStyle(fontSize: 16, color: Colors.grey),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _editProfile,
              child: Text('Edit Profile'),
            ),
          ],
        ),
      ),
    );
  }
}

class EditProfileScreen extends StatefulWidget {
  final String name;
  final String email;
  final String phone;
  final String address;

  EditProfileScreen({
    required this.name,
    required this.email,
    required this.phone,
    required this.address,
  });

  @override
  _EditProfileScreenState createState() => _EditProfileScreenState();
}

class _EditProfileScreenState extends State<EditProfileScreen> {
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _phoneController = TextEditingController();
  final TextEditingController _addressController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _nameController.text = widget.name;
    _emailController.text = widget.email;
    _phoneController.text = widget.phone;
    _addressController.text = widget.address;
  }

  void _saveProfile() {
    Navigator.pop(context, {
      'name': _nameController.text,
      'email': _emailController.text,
      'phone': _phoneController.text,
      'address': _addressController.text,
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Profile'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _nameController,
              decoration: InputDecoration(labelText: 'Name'),
            ),
            SizedBox(height: 16),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            SizedBox(height: 16),
            TextField(
              controller: _phoneController,
              decoration: InputDecoration(labelText: 'Phone'),
            ),
            SizedBox(height: 16),
            TextField(
              controller: _addressController,
              decoration: InputDecoration(labelText: 'Address'),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _saveProfile,
              child: Text('Save'),
            ),
          ],
        ),
      ),
    );
  }
}

 

 

위 코드는 추가적인 프로필 정보(전화번호, 주소)를 포함한 예제입니다. 사용자가 이름, 이메일, 전화번호, 주소를 편집할 수 있으며, 편집된 정보는 이전 화면으로 전달됩니다.

결론

Flutter에서 프로필 화면을 구현하면 사용자가 자신의 정보를 확인하고 편집할 수 있도록 도울 수 있습니다. TextField, CircleAvatar, ElevatedButton 위젯을 사용하여 기본적인 프로필 화면을 만들고, 유효성 검사와 프로필 편집 기능을 추가하여 완성도 높은 프로필 화면을 구현할 수 있습니다. 또한, 커스텀 디자인을 적용하여 사용자 경험을 향상시킬 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 매력적이고 기능적인 프로필 화면을 구현해보세요. 프로필 화면을 통해 사용자에게 개인화된 경험을 제공할 수 있습니다.