-
연락처 앱 업그레이드카테고리 없음 2023. 2. 9. 23:33
- 스크린 제외 두 페이지가 존재합니다.
- 연락처 상세보기 페이지, ContactDetailPage
- 메인페이지, MainPage
- MainPage는 3개의 스크린을 가집니다.
- 연락처, ContactScreen
- 통화기록, HistoryScreen
- 설정, SettingScreen
- BottomNavigationBar의 요소를 클릭시 해당 스크린으로 바뀌어 보여집니다.
- ContactScreen의 커스텀위젯인 ContactTile을 누르면 연락처 상세보기 페이지로 이동됩니다.
- ContactDetailPage 안에도 ContactTile 위젯이 포함되어 있습니다.
처음볼땐 할거는 많지만 쉬워보였다... 그런데 파일들을 여러개만들다보니 헷갈려서 강의보고 따라해봤다...
아래는 메인페이지코드
import 'package:assigment11/screen/contact_screen.dart';import 'package:assigment11/screen/history_screen.dart';import 'package:assigment11/screen/setting_screen.dart';import 'package:assigment11/widget/ContactTile.dart';import 'package:flutter/material.dart';
class MainPage extends StatefulWidget {const MainPage({super.key});
@overrideState<MainPage> createState() => _MainPageState();}
class _MainPageState extends State<MainPage> {var currentScreenIdx = 0;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('내 연락처'),actions: [Padding(padding: const EdgeInsets.all(16),child: Icon(Icons.search),),Padding(padding: const EdgeInsets.all(16),child: Icon(Icons.more_vert),),],),body: [ContactScreen(),HistoryScreen(),SettingScreen(),][currentScreenIdx],floatingActionButton:FloatingActionButton(onPressed: () {}, child: Icon(Icons.add)),bottomNavigationBar: BottomNavigationBar(currentIndex: currentScreenIdx,onTap: ((value) {currentScreenIdx = value;setState(() {});}),items: [BottomNavigationBarItem(icon: Icon(Icons.contact_phone), label: '연락처'),BottomNavigationBarItem(icon: Icon(Icons.history), label: '통화기록'),BottomNavigationBarItem(icon: Icon(Icons.settings), label: '설정'),]),);}}currentScreenIdx라는 변수를 저장해 Index값으로 NavigationBar에 아이콘을 텝해 스크린을 바꿨고 ContactScreen, HistoryScreen, SettingScreen 세 스크린의 파일을 따로만들어서 import했다.
아래는 ContactTile 코드
import 'package:assigment11/page/contact_detail_page.dart';import 'package:flutter/material.dart';import 'package:flutter/src/widgets/container.dart';import 'package:flutter/src/widgets/framework.dart';
class ContactTile extends StatelessWidget {const ContactTile({super.key,required this.imgUrl,required this.name,required this.phone});final String imgUrl;final String name;final String phone;
@overrideWidget build(BuildContext context) {return ListTile(onTap: () {Navigator.push(context,MaterialPageRoute(builder: (context) => ContactDetailPage(name: name, phone: phone, image: imgUrl)));},title: Text(name),subtitle: Text(phone),leading: CircleAvatar(backgroundImage: NetworkImage(imgUrl)),trailing: Icon(Icons.call),);}}ListTile을 보기 편하게 정리했고 ListTile을 누르면 ContactDetailPage로 이동하게 된다.
아래는 ContactDetailPage코드
import 'package:assigment11/widget/ContactTile.dart';import 'package:flutter/material.dart';import 'package:flutter/src/widgets/container.dart';import 'package:flutter/src/widgets/framework.dart';
class ContactDetailPage extends StatelessWidget {const ContactDetailPage({super.key,required this.name,required this.phone,required this.image});final String name;final String phone;final String image;
@overrideWidget build(BuildContext context) {return Scaffold(extendBodyBehindAppBar: true,appBar: AppBar(title: Text(name),elevation: 0,backgroundColor: Colors.transparent,),body: Column(children: [Image.network(image,width: double.infinity,fit: BoxFit.cover,height: 240,),ContactTile(imgUrl: image, name: name, phone: phone)],),);}}이미지와 name, phone은 ContactTile에서 쓰는것을 가져왔다.아래는 연락처스크린코드import 'package:assigment11/widget/ContactTile.dart';import 'package:flutter/material.dart';import 'package:flutter/src/widgets/container.dart';import 'package:flutter/src/widgets/framework.dart';
class ContactScreen extends StatelessWidget {const ContactScreen({super.key});
@overrideWidget build(BuildContext context) {return ListView(children: [ContactTile(name: '이태디',phone: '010-1010-2000'),ContactTile(name: '밀리',phone: '010-2000-3000'),ContactTile(name: '크리스',phone: '010-3000-4000'),ContactTile(name: '주노',phone: '010-4000-5000'),ContactTile(name: '해리',phone: '010-5000-6000'),ContactTile(name: '벨라',phone: '010-6000-7000'),ContactTile(name: '헬렌',phone: '010-7000-8000'),],);}}ContactTile에서 정리한덕분에 깔끔해보인다.
아래는 설정스크린코드
import 'package:flutter/material.dart';import 'package:flutter/src/widgets/container.dart';import 'package:flutter/src/widgets/framework.dart';
class SettingScreen extends StatelessWidget {const SettingScreen({super.key});
@overrideWidget build(BuildContext context) {return Scaffold(body: ListView(children: [Padding(padding: const EdgeInsets.all(16),child: Text('차단목록'),),Padding(padding: const EdgeInsets.all(16),child: Text('벨소리설정'),),Padding(padding: const EdgeInsets.all(16),child: Text('전화통계'),),],),);}}아래는 통화기록스크린코드import 'package:flutter/material.dart';import 'package:flutter/src/widgets/container.dart';import 'package:flutter/src/widgets/framework.dart';
class HistoryScreen extends StatelessWidget {const HistoryScreen({super.key});
@overrideWidget build(BuildContext context) {var history = [{"name": "크리스", "icon": "call_missed"},{"name": "헬렌", "icon": "north_east"},{"name": "크리스", "icon": "north_east"},{"name": "크리스", "icon": "north_east"},];return Scaffold(body: ListView.builder(itemCount: history.length,itemBuilder: ((context, index) {return Padding(padding: const EdgeInsets.all(16),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Text(history[index]['name'].toString()),if (history[index]['icon'] == 'north_east')Icon(Icons.north_east),if (history[index]['icon'] == 'call_missed')Icon(Icons.call_missed),],),);}),),);}}ListView.build를 배워서 사용해봤더니 됐다. if문을 써서 아이콘이 맞게 나오게 했다.Android Emulator - Pixel_XL_API_27_5554 2023-02-09 23-29-55.mp47.39MB이번건 너무 어려워서 강의를 보고 한번 해봤다.
- 스크린 제외 두 페이지가 존재합니다.