플러터(113)
-
[026] 플러터 (Flutter) 배우기 - bottomNavigationBar (화면 하단 네비게이션바 배치)
안녕하세요~ totally 개발자입니다. 오늘 다룰 부분은 Scaffold 위젯에 있는 bottomNavigationBar 속성을 이용하여 화면 하단 네비게이션 바를 배치해보는 것에 대해 살펴보도록 하겠습니다. 보통 인스타그램, 카카오톡 등 요즘 어플들을 보면 화면 하단에 네비게이션바가 위치하고 있는 것을 알 수 있습니다. 대부분의 이유로는 화면 하단에 있기 때문에 한 손가락으로 쉽게 누르면서 조작할 수 있다는 장점이 있습니다. 예제로 바로 들어가보도록 하겠습니다. Step1: 9번째 줄에 with SingleTickerProviderStateMixin을 추가하고 10, 11번째 줄에 TabController와 tab을 선택했을 때 선택한 인덱스 값을 담을 수 있는 integer 변수를 하나 선언해줍니다..
2023.01.27 -
[025] 플러터 (Flutter) 배우기 - TTS(Text To Speech): 텍스트를 소리로 나타내기
안녕하세요~ totally 개발자입니다. TTS(Text To Speech) 오늘 다룰 부분은 TTS(Text To Speech)입니다. TTS란 용어 그대로 텍스트를 소리로 나타내는 것입니다. 플러터 패키지를 사용하기 때문에 pubspec.yaml 파일에 다음처럼 명시해주시면 됩니다. 그 다음 flutter_tts.dart를 import 해줍니다. 10번째, 11번째 줄처럼 FlutterTts와 TextEditingController 인스턴스를 만들어줍니다. 다음으로는 13-20번째 줄처럼 initState 메소드를 만들어주어 초기화될 때 tts.setLanguage("ko-KR")과 tts.setSpeechRate(0.5)를 사용하여 언어와 언어를 말하는 속도를 지정해줍니다. 영어인 경우에는 "en-..
2023.01.20 -
[024] 플러터 (Flutter) 배우기 - Lifecycle (플러터 생명주기)
안녕하세요~ totally 개발자입니다. 오늘 이 시간에는 플러터의 Lifecycle 생명주기에 대해서 살펴보도록 하겠습니다. 플러터에는 Stateless Widget과 Stateful Widget으로 나뉘어집니다. Stateless Widget은 제목 그대로 상태 없는 위젯으로 구조가 매우 단순합니다. Constructor라고 하는 생성자와 Widget build가 사용되어 화면에 출력될 내용을 표시합니다. 위의 예제를 보시면 extends StatelessWidget으로 표시되어 있고 const STATELESSWIDGETEXAMPLE() 생성자를 만들어줍니다. 그 다음에 @override를 작성한 뒤에 Widget build(BuildContext context)로 출력할 위젯을 작성하면 됩니다. ..
2023.01.17 -
[023] 플러터 (Flutter) 배우기 - Shared Preferences (디스크에 간단한 데이터 저장)
안녕하세요~ totally 개발자입니다. SharedPreferences 오늘 살펴볼 부분은 SharedPreferences입니다. 간단한 자료를 디스크에 저장할 때 유용하게 사용되며 방대한 자료는 이 방법을 권장하지 않습니다. 이 SharedPreferences는 다양하게 사용될 수 있습니다. 예를 들어 사용자의 정보를 기억한다던지 앱을 사용하고 종료한 후 기존에 설정해두었던 데이터를 불러오는 상황에서 유용합니다. 사용 방법은 간단하며 key, value 구조로 되어 있습니다. 사용하는 방법은 아래와 같습니다. 1) pubspec.yaml에 shared_preferences: 2.0.5 (현재 기준 2.0.15이지만 필자는 2.0.5로 진행했습니다)를 입력합니다. 버전 및 공식 문서는 아래에서 확인하시..
2022.12.11 -
[022] 플러터 (Flutter) 배우기 - FutureBuilder, Future, Async, Await, 로딩표시, JSON 파일 불러오기
안녕하세요, totally 개발자입니다. 오늘 다룰 부분은 좀 방대하지만 Flutter에서 반드시 알아야 할 부분으로 FutureBuilder, Future, Async, Await, 로딩 중일 때 로딩중임을 표시하는 방법, JSON 파일을 불러오는 플러터에서 불러와서 출력하는 방법들입니다. 이 개념은 비동기(Asynchronous) 처리로써, 보통 한 작업을 처리하고 나서 다음 작업을 처리하는 반면, 비동기에서는 한 작업을 일단 처리를 시작하고 처리가 끝나지 않았음에도 불구하고 다음 코드 작업 실행에 착수합니다. 그 때 플러터에서 사용하는 개념이 Future, Async, Await입니다. async 키워드는 함수 부분에 붙여주고 await는 실행해야 하는 함수 앞에 붙여주면 됩니다. 바로 예제를 확인..
2022.11.30 -
[021] 플러터 (Flutter) 배우기 - Youtube Video (유튜브 동영상 삽입)
안녕하세요~ totally 개발자입니다. Youtube Video 오늘은 플러터에 유튜브 동영상을 삽입하는 방법에 대하여 알아보겠습니다. 이 유튜브 동영상 삽입을 위해서는 플러그인을 사용해야 하는데 진행 과정은 아래와 같습니다. 1. 플러그인 설정 2. Info.plist 수정 3. 동영상 및 비디오 컨트롤러 추가 먼저 플러그인 설정부터 확인해보도록 하겠습니다. 1. 플러그인 설정 우선 프로젝트 경로에 있는 pubspec.yaml 파일을 찾고 dependencies: 아래 줄에 youtube_player_flutter: 을 추가해줍니다. 2. Info.plist 수정 ios -> Runner -> Info.plist에 5,6번째 줄처럼 io.flutter.embedded_views_preview 넣어줍니..
2022.11.11