본문 바로가기

flutter34

[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.
[Flutter] 클론 코딩(당근) 마무리 - ( week 2 ) 이제 생성되는 Feed들이 서로 다른 것들이 출력되도록 수정한다. Image 생성되는 각 피드들이 서로 다른 이미지가 출력되도록 해본다. 다른 이미지가 출력되기 위해서는 생성되는 Feed의 정보 중에 이미지의 url에 대한 정보가 달라야 한다. url의 정보를 저장할 변수를 선언하고 해당 변수를 통해서 Feed가 생성될 때 불러올 이미지의 url로 사용되도록 한다. final 키워드는 값이 한번 할당된 이후에 상수로 취급된다. 따라서 반드시 한 번의 값의 할당이 필요하다. 따라서 Feed 생성자 내부에 required this.imageUrl로 값을 할당해 준다. Feed 생성자에서 받아온 imageUrl은 이미지 위젯에서 사용하도록 가져와야 하는데 이 변수를 사용하기 위해서는 _FeedState에서 w.. 2023. 4. 15.

티스토리툴바