[Flutter] 넷플릭스 클론 코딩 #8 | 프로필 화면 만들기 | 이미지 원형으로 추가 | 주소 이동 가능하도록 추가 | Linkify | LaunchURL

이번 시간에는 더보기를 누르면 Profile 화면이 보이고,

프로필 화면은 이미지를 원형으로 추가, 그 아래에 링크를 추가하도록 함!

 

완성된 화면 미리보기 ~

 

 

1. 원형 이미지 추가

CircleAvatar 를 이용해서 png 이미지를 원형으로 보이도록 추가 (프로필 사진 대용)

https://api.flutter.dev/flutter/material/CircleAvatar-class.html

Container(
  padding: const EdgeInsets.only(top: 50),
  child: const CircleAvatar(
    radius: 100,
    backgroundImage: AssetImage('images/bbongflix_logo.png'),
  ),
),

 

2. 클릭과 이동이 가능한 링크 추가

https://codingstorywithme.tistory.com/92

이미 이 전 포스트에서 자세히 다룸!

Linkify 와 launchUrl을 이용해서 구현!

Container(
  padding: const EdgeInsets.all(10),
  child: Linkify(
    onOpen: (link) async {
      if (!await launchUrl(Uri.parse(link.url))) {
        throw Exception('Could not launch ${link.url}');
      }
    },
    text: "https://github.com/leehy0321",
    style:
        const TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
    linkStyle: const TextStyle(color: Colors.white),
  ),
),

 

3. 전체 소스

more_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:url_launcher/url_launcher.dart';

class MoreScreen extends StatelessWidget {
  const MoreScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          children: <Widget>[
            Container(
              padding: const EdgeInsets.only(top: 50),
              child: const CircleAvatar(
                radius: 100,
                backgroundImage: AssetImage('images/bbongflix_logo.png'),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(top: 15),
              child: const Text(
                'Hayoung',
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 25,
                    color: Colors.white),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(10),
              width: 140,
              height: 5,
              color: Colors.red,
            ),
            Container(
              padding: const EdgeInsets.all(10),
              child: Linkify(
                onOpen: (link) async {
                  if (!await launchUrl(Uri.parse(link.url))) {
                    throw Exception('Could not launch ${link.url}');
                  }
                },
                text: "https://github.com/leehy0321",
                style:
                    const TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                linkStyle: const TextStyle(color: Colors.white),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(10),
              child: TextButton(
                onPressed: () {},
                child: Container(
                  child: const Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.edit,
                        color: Colors.white,
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Text(
                        'Edit Profile',
                        style: TextStyle(color: Colors.white),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

main.dart

네비게이션 4번째 클릭 시, 위 화면으로 이동하도록 수정

import 'package:flutter/material.dart';
import 'package:netflix_clone/screen/more_screen.dart';
import 'package:netflix_clone/widget/bottom_bar.dart';
import 'package:netflix_clone/screen/home_screen.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

class _MyAppState extends State<MyApp> {
  // TabController controller;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'YoungFlix',
        theme: ThemeData(
            brightness: Brightness.dark,
            primaryColor: Colors.black,
            secondaryHeaderColor: Colors.white),
        home: DefaultTabController(
          length: 4,
          child: Scaffold(
            body: TabBarView(
              physics:
                  const NeverScrollableScrollPhysics(),
              children: <Widget>[
                // put screent for displaying to children.
                const HomeScreen(),
                Container(
                  child: const Center(
                    child: Text('search'),
                  ),
                ),
                Container(
                  child: const Center(
                    child: Text('save'),
                  ),
                ),
                const MoreScreen(), // 요기!
              ],
            ),
            bottomNavigationBar: const Bottom(),
          ),
        ));
  }
}

 

이번 시간은 강사님이 패스해도 된다고 했지만, UI에 대해 더 알고싶어서 해봤다!

근데 너무너무 잘 들었다고 생각하는게 URL 이동하는 방법도 알 수 있어서 좋았다. 히히 :)

 

재밌고 신기한 Flutter