안녕하세요. 혀코입니다.
이번에는 flutter.dev에서 flutter 앱 만들기 튜토리얼인 회사명 랜덤 생성기를 만들어 보겠습니다.
flutter 앱을 만들기 위해서 다음 명령어를 사용합니다.
$ flutter create my_app
lib 폴더에 있는 main.dart 파일을 아래의 소스코드와 동일하게 작성합니다.
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: const Center(
child: Text('Hello World'),
),
),
);
}
}
그리고 Android Studio에서 애뮬레이터를 실행시키면,
다음과 같이 화면 정중앙에 Hello World 글자가 나타나는 것을 확인할 수 있습니다.
회사명 랜덤 생성기 제작을 위해서 english_words 라는 flutter package를 설치해 줍니다.
$ flutter pub add english_words
그러면, pubspec.yaml 파일에 다음과 같이 english_words 가 추가된 것을 확인할 수 있습니다.
그리고 해당 화면을 보면서 우측 상단의 Pub get 버튼을 클릭합니다. 패키지가 프로젝트에 추가되었습니다.
그리고, lib 폴더의 main.dart 파일을 다음과 같이 수정합니다.
import 'package:english_words/english_words.dart'; // 추가됨
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final wordPair = WordPair.random(); // 추가됨
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: Center( // 변경됨
child: Text(wordPair.asPascalCase), // 변경됨
),
),
);
}
}
수정하고 소스코드를 저장하면 Hot Reload 기능에 의해서 다시 빌드하지 않아도 텍스트가 english_words 패키지의 내용으로 변경 됩니다.
여기까진 StatelessWidget을 사용해서 정적으로 변하지가 않지만, StatefulWidget을 사용해서 동작으로 랜덤하게 회사명을 생성해 보겠습니다.
lib 폴더안의 main.dart 파일 소스코드의 최하단에 엔터키를 두번 치고, stful 를 하면 stful 템플릿 소스코드가 나타납니다. class 이름으로 RandomWords를 입력하면 관련된 부분에 자동으로 모두 업데이트가 됩니다.
class RandomWords extends StatefulWidget {
const RandomWords({Key? key}) : super(key: key);
@override
State<RandomWords> createState() => _RandomWordsState();
}
class _RandomWordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
final wordPair = WordPair.random(); // 변경됨
return Text(wordPair.asPascalCase); // 추가됨
}
}
소스코드 템플릿을 사용해서 RandomWords StatefulWidget를 추가한 후 위에 코드 에 변경된 부분과 추가된 부분을 업데이트 해줍니다.
그리고 위에 MyApp StatelessWidget class 코드를 다음과 같이 업데이트 해줍니다.
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: const Center( // 변경됨
child: RandomWords(), // 변경됨
),
),
);
}
}
앱을 종료하고 다시 시작하면 단어가 바뀌는 것을 확인할 수 있습니다.
이제는 회사명을 랜덤으로 생성해서 리스트 뷰로 보여주도록 변경해 보겠습니다.
class _RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[]; // 1
final _biggerFont = const TextStyle(fontSize: 18); // 2
// ···
}
1. State 클래스에 랜덤으로 생성된 회사명을 넣어주기 위해 비어있는 배열을 추가해줍니다.
2. 폰트 설정을 위해 추가해줍니다.
그리고 리스트로 보여주기 위해 ListView 를 아래와 같이 작성합니다.
class _RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _biggerFont = const TextStyle(fontSize: 18);
@override
Widget build(BuildContext context) {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: (context, i) {
if (i.isOdd) return const Divider();
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return ListTile(
title: Text(
_suggestions[index].asPascalCase,
style: _biggerFont,
));
});
}
}
ListView.builder 를 사용시 리스트의 padding과 리스트의 컨텐츠를 위해 itemBuilder를 설정했으며, itemBuilder에서 i가 홀수 일때, 점선이 나타날 수 있도록 구분선을 넣어주고, 짝수 일때는 generateWordPairs 함수를 통해 랜덤으로 생성된 단어 10개를 _suggestions 배열에 추가해줍니다.
그리고 itemBuilder 를 리턴할때 ListTile을 사용하고 텍스트는 PascalCase 형식과 미리 지정한 폰트 사이즈로 출력해줍니다.
아래로 쓸어내리면 단어가 계속 추가되어 표시되는 것을 확인할 수 있습니다.
전체 코드는 다음과 같습니다.
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Startup Name Generator',
home: Scaffold(
appBar: AppBar(
title: const Text('Startup Name Generator'),
),
body: const Center(
child: RandomWords(),
),
),
);
}
}
class RandomWords extends StatefulWidget {
const RandomWords({Key? key}) : super(key: key);
@override
State<RandomWords> createState() => _RandomWordsState();
}
class _RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _biggerFont = const TextStyle(fontSize: 18);
@override
Widget build(BuildContext context) {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: /*1*/ (context, i) {
if (i.isOdd) return const Divider(); /*2*/
final index = i ~/ 2; /*3*/
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10)); /*4*/
}
return ListTile(
title: Text(
_suggestions[index].asPascalCase,
style: _biggerFont,
));
});
}
}
이렇게 회사명 랜덤 생성기를 만들어봤습니다.
해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글