본문 바로가기

clone_coding4

[Flutter] 클론코딩(Shazam) 3.첫번째 페이지 - ( week 2 ) 현재 페이지 구현은 난이도 순서대로 진행되었다. 마지막 첫 번째 페이지는 비교적 난도가 높은 작업이다. 3. 첫번째 페이지 상단부터 작업을 한다. 상단에는 아이콘과 텍스트가 배치되어 있다. return SafeArea( child: Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Icon(Icons.settings), Text("라이브러리"), Icon(null), ], ) ], ), ); 아이콘과 텍스트 두 위젯만 넣고 spaceBetween으로 정렬하면 양옆으로 위젯들이 붙게 되는데 이때 Icon(null)을 해주면 텍스트가 중앙에 배치되는 요령이 있다. 아이콘을 정렬해 주는데 Padding으.. 2023. 4. 18.
[Flutter] 클론코딩(Shazam) 2.세번째 페이지 - ( week 2 ) 2. 두 번째 페이지 두 번째 페이지의 리스트는 보라색 영역 아래만 스크롤이 가능하다는 걸 염두한다. SafeArea( child: Column( children: [ Text( '차트', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 18, ), ), SizedBox(height: 16), Expanded( child: ListView( children: [ Stack( alignment: Alignment.center, children: [ Container( color: Colors.purple[900], width: double.infinity, height: 180, ), Column( children: [ ElevatedButton( on.. 2023. 4. 18.
[Flutter] 클론코딩(Shazam) 1.두번째 페이지 - ( week 2 ) 지난번 과제를 할 때 처음부터 만드려니 기능적인 부분 구현에 있어서 오래 걸리는 것 같아 베이스코드 위에서 다시 작업한다. 1. 두번째 페이지 // 두번째 페이지 class SecondTab extends StatelessWidget { const SecondTab({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Center(child: Text('두번째 페이지')); } } 두 번째 페이지의 배경색은 그러데이션이 들어가 있는데 그 부분부터 만들어준다. return Container( child: SafeArea( child: Text("Second Page"), ), ); SafeArea는 기기의 홈.. 2023. 4. 18.
[Flutter] 클론코딩(Shazam) - ( week 2 ) Shazam을 클론코딩 해본다. 본래 사이트는 다음 링크에서 확인할 수 있다. Shazam 만들어야 할 페이지는 총 3개 중앙부터 시작해서 다른 페이지들도 만들어본다. 1. 첫 번째 페이지 Background 상태바부터 하단까지 파란색이 점점 어두워지는 배경이다. 이 부분부터 만들어본다. import 'package:flutter/services.dart'; void main() { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( statusBarColor: Colors.blue, // 배경색 statusBarIconBrightness: Brightness.light, // 아이콘 색상 )); runApp(MyApp()); } 상태바를 제어하기 위.. 2023. 4. 18.

티스토리툴바