1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
| // dog_detail_page.dart
import 'package:flutter/material.dart';
import 'dog_model.dart';
class DogDetailPage extends StatefulWidget { final Dog dog;
DogDetailPage(this.dog);
@override _DogDetailPageState createState() => _DogDetailPageState(); }
class _DogDetailPageState extends State<DogDetailPage> { // 스타일에 대한 임의의 사이즈 선택 final double dogAvatarSize = 150.0;
Widget get dogImage { // Container는 자식들의 사이즈를 정의 return Container( height: dogAvatarSize, width: dogAvatarSize, // Box Decoration을 사용하여 이미지를 원형으로 만들고, 스타일을 위해 임의의 그림자(shadow)를 추가한다. decoration: BoxDecoration( shape: BoxShape.circle, // CSS에서 처럼 여러분은 종종 오른쪽 모양을 위해 다수의 BoxShadows를 추가하길 원한다. // 그래서 boxShadow 속성은 BoxShadows의 목록을 가진다. boxShadow: [ const BoxShadow( // CSS 처럼: // 이것은 동일한 4개의 속성을 가진다. offset: const Offset(1.0, 2.0), blurRadius: 2.0, spreadRadius: -1.0, color: const Color(0x33000000)), const BoxShadow( offset: const Offset(2.0, 1.0), blurRadius: 3.0, spreadRadius: 0.0, color: const Color(0x24000000)), const BoxShadow( offset: const Offset(3.0, 1.0), blurRadius: 4.0, spreadRadius: 2.0, color: const Color(0x1F000000)), ], // 컨테이너 배경에 이미지를 추가. image: DecorationImage( fit: BoxFit.cover, image: NetworkImage(widget.dog.imageUrl), ), ), ); }
// ★ 10/10으로 표시되는 등급 부분 Widget get rating { // 위젯을 수평으로 배치하기 위해 row를 사용 return Row( // 위젯을 행(row)의 가로축 중심에 배치 mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon( Icons.star, size: 40.0, ), Text(' ${widget.dog.rating} / 10', style: Theme.of(context).textTheme.display2), ], ); }
// 이미지, 평가점수, 강아지 정보를 표시하는 위젯 Widget get dogProfile { return Container( padding: EdgeInsets.symmetric(vertical: 32.0), decoration: BoxDecoration( // 이것은 앱 전체에 공유 할 수 있는 커스텀 LinearGradient 위젯을 생성 할 수 있는 좋은 기회다 // 하지만 난 이걸 당신에게 맡길것이다. (재사용 가능한 컴포넌트 관점임) gradient: LinearGradient( begin: Alignment.topRight, end: Alignment.bottomLeft, stops: [0.1, 0.5, 0.7, 0.9], colors: [ Colors.indigo[800], Colors.indigo[700], Colors.indigo[600], Colors.indigo[400], ], ), ), // 강아지 프로필 정보 child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ dogImage, Text( '${widget.dog.name} 🎾', style: TextStyle(fontSize: 32.0), ), Text( widget.dog.location, style: TextStyle(fontSize: 20.0), ), Padding( padding: const EdgeInsets.symmetric(horizontal: 32.0, vertical: 16.0), child: Text(widget.dog.description), ), rating ], ), ); }
// 마지막으로 빌드 메서드: // 하나의 거대한 빌드 메서드를 작성하는것 보다 이 파일의 구현처럼 위젯을 분해해서 UI를 만드는것이 훨씬 쉽다. @override Widget build(BuildContext context) { // This is a new page, so you need a new Scaffold! return Scaffold( backgroundColor: Colors.black87, appBar: AppBar( backgroundColor: Colors.black87, title: Text('Meet ${widget.dog.name}'), ), body: dogProfile, ); } }
|