[Flutter] 플러터 기초 (2) - 리스트, 스낵바 등 기초 연습.

 

 

[Flutter] 플러터 기초 (2) - 리스트, 스낵바 등 기초 연습.

 

 

 

Flutter 플러터 기초 (2) - 리스트, 스낵바 등 기초 연습.

 

 

 

이모티콘・01・고양이 마멋 친구들 - Google Play 앱

 

 

안녕하세요 정보처리마법사 입니다.

 

이번 포스팅의 주제는  Flutter 기초에 관한 내용 (2) 입니다.

저도 Flutter, Dart 초보라 공부하면서 연습하면서 작성하는 포스팅이니

저와같은 초보분들이 참고용으로만 보시면 될 듯합니다.

 

😁

 

 

연습할 Dart파일을 새로 하나 만듭니다

 

 

전 파일명을 ExamListState로 했습니다

 

 

뒤에 진행을하려면 english_words 플러그인 패키지를 import해야하는데 미리 pubspec.yaml 파일의 dependencies 구역에 보이는 것처럼 추가를 해놓고 나서 우측 상단에 Packages get 을 클릭해줍니다.

 

 

Packages get Click!

 

 

아직은 방금 그 패키지는 임포트 하지 않고 일단 material.dart 를 import 해준뒤 클래스를 하나 만듭니다

 

 

일일이 타이핑을 해도 되지만 Alt + 엔터를 눌러서 나오는 목록중에 알맞은 것을 선택해줍니다. Create 1 missing override(s) 클릭!

 

 

자동으로 orverride 할 것들을 작성해줍니다

 

 

그리고 아까 Packages get 한 english_words.dart 를 import 해줍니다

 

 

 

 

 

 

클래스를 하나 만들어줍니다.

 

 

변수를 하나 만들어서 임의의 랜덤 영단어를 생성한 후 대입해줍니다

 

 

main.dart 파일로 이동해서 이런식으로 작성합니다

 

 

위의 주석에서 오타, RandomWordList가 아니고 ExamListState 입니다

appBar를 하나 만들어주고, body에는 그냥 test 라는 문자열을 출력해봅니다

 

 

음 잘되네요

 

 

생성한 랜덤 영단어를 한 번 출력해봅니다 케이스는 파스칼케이스로, 글씨크기는 2로 해볼게요

 

 

잘 되네요

 

 

참고로 Dart언어에서는 앞에 _ 를 붙이면 자동으로 private이 됩니다

 

 

생성된 리스트뷰의 인덱스가 홀수이면 Divider을 그어주고, Divider도 인덱스에 포함이 되기 때문에 2로 나눈 몪을 실제 인덱스로 간주하고 realIndex 변수에 담아줍니다. 리스트의 상태가 변할때 마다 _randomWordList 아이템 갯수와 realIndex를 비교해서 아이템갯수 이상이면 랜덤영단어 10개를 List<WordPair> _randomWordList 에 넣어줍니다

 

 

그냥 텍스트와 디바이더만 뿌리니 뭔가 정렬이 되지 않은 느낌이네요

 

 

기존 그냥 텍스트를 ListTile로 바꿔서 꼬리에 푸른색 아이콘도 달고 onTab도 추가하여 탭하면 해당 단어를 하단 스낵바에 1000밀리세컨드동안 파스칼케이스로 글자크기 2로 뿌려주게 만들었습니다

 

 

FormGrace를 터치하니 스낵바에 잘 나타나네요

 

 

 

 

 

 

 저도 플러터, 다트 초보라 미숙한점 양해바라며, 함께? 점점 익숙해져봅시다!

 

이상으로 포스팅을 마칩니다. 감사합니다.

 

 

 

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_app_test/src/ExamListState.dart';
 
void main() => runApp(FlutterExam());
 
class FlutterExam extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ExamListState(),
    );
  }
}

 

 

ExamListState.dart

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
 
// RandomWordList 리스트는 상태가 변하는 리스트이기 때문에 StatefulWidget 을 상속받아 사용할 예정.
class ExamListState extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ExamListStateState();
  }
}
 
// 상태가 변할때마다 _RandomWordListState 클래스의 상태를 바꿔준다.
class _ExamListStateState extends State<ExamListState> {
  // 여러 랜덤 영어단어를 저장할 List 를 만들어 줌.
  final List<WordPair> _randomWordList = <WordPair>[];
 
  // Set은 List와 비슷한데 똑같은(동일한 값의) 오브젝트가 Set 값의 안에 들어갈 수 없음.
  final Set<WordPair> _savedWord = Set<WordPair>();
 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final randomEnglishWord = WordPair.random();
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter State Exam"),
        ),
        body: ListView.builder(itemBuilder: (context, index) {
          // context : 여기 코드가 실행될 때 이 앱의 현재상황을 context라고 함.
          // index : ListView 의 인덱스 0부터 시작.
 
          if (index.isOdd) {
            // Index가 홀수면 Divider를 그어줘라.
            return Divider();
          }
 
          // realIndex = index를 2로 나눈 몫
          var realIndex = index ~/ 2;
 
          // _randomWordList 아이템 갯수 이상이면 _randomWordList에 랜덤영단어 10개를 넣어줘라.
          if (realIndex >= _randomWordList.length) {
            _randomWordList.addAll(generateWordPairs().take(10));
          }
 
          return ListTile(
            title: Text(
              _randomWordList[realIndex].asPascalCase,
              textScaleFactor: 1.5,
            ),
            trailing: Icon(
              Icons.tag_faces,
              color: Colors.blue,
            ),
            onTap: () {
              Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text(
                  _randomWordList[realIndex].asPascalCase,
                  textScaleFactor: 2,
                ),
                duration: Duration(milliseconds: 1000),
              ));
            },
          );
        }));
  }
}
 

Ctrl + C ,   Ctrl + V 

 

 

 

 

 

 

 

이상으로 포스팅을 마칩니다. 감사합니다.

 

 

 

 

잘 못 된 정보가 있으면 말씀해주세요.

공감버튼 클릭은 작성자에게 큰 힘이 됩니다.  행복한 하루 되세요.

 

“파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"