class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { /// MaterialApp is the base Widget for your Flutter Application /// Gives us access to routing, context, and meta info functionality. return MaterialApp( title: 'We Rate Dogs', // Make all our text default to white // and backgrounds default to dark theme: ThemeData(brightness: Brightness.dark), home: MyHomePage(title: 'We Rate Dogs'), ); } }
class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { /// Scaffold is the base for a page. /// It gives an AppBar for the top, /// Space for the main body, bottom navigation, and more. return Scaffold( /// App bar has a ton of functionality, but for now lets /// just give it a color and a title. appBar: AppBar( /// Access this widgets properties with 'widget' title: Text(widget.title), backgroundColor: Colors.black87, ), /// Container is a convenience widget that lets us style it's /// children. It doesn't take up any space itself, so it /// can be used as a placeholder in your code. body: Container(), ); } }
2. Dog Model 클래스 생성.
data model을 위해 Dog이라는 일반 Dart클래스를 만든다.
첫번째로 dog_model.dart라는 파일을 lib 폴더안에 생성한다.
1 2 3
- lib -dog_model.dart -main.dart
저 파일에서 몇 가지 속성을 가진 수퍼 기본 클래스 (super basic class)를 만들 것이다.
1 2 3 4 5 6 7 8 9 10 11
class Dog { final String name; final String location; final String description; String imageUrl;
// 모든 강아지는 10점부터 출발한다. 왜냐면 다 좋은 강아지니깐~ int rating = 10;
Future getImageUrl() async { // Null check so our app isn't doing extra work. // If there's already an image, we don't need to get one. if (imageUrl != null) { return; }
// This is how http calls are done in flutter: HttpClient http = HttpClient(); try { // Use darts Uri builder var uri = Uri.http('dog.ceo', '/api/breeds/image/random'); var request = await http.getUrl(uri); var response = await request.close(); var responseBody = await response.transform(utf8.decoder).join(); // The dog.ceo API returns a JSON object with a property // called 'message', which actually is the URL. imageUrl = json.decode(responseBody)['message']; } catch (exception) { print(exception); } }
class _MyHomePageState extends State<MyHomePage> { List<Dog> initialDoggos = [] ..add(Dog('Ruby', 'Portland, OR, USA', 'Ruby is a very good girl. Yes: Fetch, loungin\'. No: Dogs who get on furniture.')) ..add(Dog('Rex', 'Seattle, WA, USA', 'Best in Show 1999')) ..add(Dog('Rod Stewart', 'Prague, CZ', 'Star good boy on international snooze team.')) ..add(Dog('Herbert', 'Dallas, TX, USA', 'A Very Good Boy')) ..add(Dog('Buddy', 'North Pole, Earth', 'Self proclaimed human lover.')); }
본 문서는 Fluter Example의 내용을 원저작자의 동의하에 번역한것 입니다.
원 저작자 Eric Windmill에게 감사를 전합니다.
이해하는데 불필요한 문장은 과감하게 버렸습니다. 오 번역에 대해서 의견 주시면 적극 반영 하겠습니다.
Basic Dogs App Setup ( 기본 강아지 앱 설정)
이것은 굉장한 프레임워크다.
이 기본 앱 튜토리얼에서는 2012년 We Rate Dogs vs Brant 대결을 통해 역대 최고의 Twitter대화에서 영감을 받아 매우 간단하고 순수한 플러터 앱을 만들 것이다. (역자주: 2010년 트위터의 WeRateDogs라는 계정이 애완견 사진을 올리고 사용자들끼리 평가와 대화를 하는 트윗에 Brant라는 계정이 딴지를 걸기 시작한 사건으로 제가 확인은 안해봤지만 단일 대화 주제로는 트위터 설립이래 최고의 대화가 오갔다고 함.)
여기서 우리는 추가 package를 가져오지(사용하지) 않을 것이며 아키텍쳐나 state관리에 대해 생각하지 않을 것이다.
이 작업이 끝날 때쯤이면, 플러터가 우리에게 얼마나 많은 것을 주었는지에 대해 상당히 놀랄것이다. 그리고 우리는 거의 모든 것을 커버하지 않을 것이다.(역자주: 플러터가 제공하는 수 많은 기능에 대해 다루진 않겠다는 의미 인듯.)