공부중... 공부중...

flutter/flutter 공부

• [flutter] flutter webview 사용시에 iOS, ipadOS 에서 allowsinlinemediaplayback 허용하기

  flutter/flutter 공부 2023. 6. 9. 10:35

  사용한 플러터 웹뷰 패키지 : webview_flutter 4.0.4 https://pub.dev/packages/webview_flutter webview_flutter | Flutter Package A Flutter plugin that provides a WebView widget on Android and iOS. pub.dev 플러터로 간단한 웹뷰 프로젝트를 진행했는데 iOS 에서 갑자기 웹뷰 화면 위로 전체화면을 차지하는 비디오 플레이어가 재생 되어졌습니다. 종료시켜도 계속 자동으로 실행되어서 더이상 뭘 할 수가 없어져버리네요. 원인 파악이 안되서 가만히 생각해보다가 해당 웹페이지에 배경음악이 자동 재생 된다는게 떠올랐습니다. 해당 내용으로 검색해보니까 flutter_webview 에서 al..

  Read More
• [flutter] actionbar 와 endDrawer 함께 사용하기

  flutter/flutter 공부 2023. 6. 8. 18:00

  appbar 에 actionbar 와 endDrawer 를 같이 사용할 일이 생겼습니다. 가운데 타이틀이 들어가야 하고 오른쪽으로 아이콘 몇 개와 drawer 아이콘이 표시 되어야 합니다. 기획서안에 형태는 대략 아래처럼 생겼네요. Scaffold 안에 appBar 설정으로 actions 와 endDrawer 를 사용하면 쉽게 될 줄 알았는데 생각대로 동작하지 않았습니다. actions 를 사용해서 아이콘을 불러오면 기존에 불러왔던 endDrawer 가 화면에서 안보이게 되는 문제가 발생합니다. actionbar 가 drawer 부분을 다 덮어버립니다. 여러 정보를 찾아봤는데 3가지 정도로 해결하는것 같았습니다. 1. Scaffold 를 상속받아서 다시 호출 https://stackoverflow.com..

  Read More
• [flutter] appbar 높이 조절 방법

  flutter/flutter 공부 2023. 6. 2. 15:32

  appbar 높이를 조절해야할 필요가 생겼습니다. 기본으로 제공되는 높이보다 조금 더 높아져야 하네요. appbar 에서 높이 조절하는 방법은 Preferred 를 사용하면 됩니다. class MyPage extends StatelessWidget { const MyPage({Key? key}): super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: PreferredSize( preferredSize: Size.fromHeight( 80.0 ), child: AppBar( title: Text('appbar title') ) ) ); } } appBar 뒤에 Pr..

  Read More
• [flutter] PDF 파일 뷰어 만들기(pdfx, internet_file 를 이용)

  flutter/flutter 공부 2023. 5. 9. 13:10

  URL 을 이용해서 PDF 뷰어 기능 추가 파일을 직접 저장해서 여는 방식이 아니고 서버에서 제공해준 API를 이용해서 보여줘야했습니다. 실제 API 를 적을수 없으니 샘플 URL 을 이용해서 작성하였습니다. 샘플 pdf URL : https://upload.wikimedia.org/wikipedia/commons/8/85/I-20-sample.pdf pdf 뷰어를 제작할 때 사용한 라이브러리는 pdfx 와 internet_file 입니다. 적용 방법 1. pubspec.yaml 파일에 라이브러리 추가 dependencies: ... pdfx: ^2.3.0 internet_file: ^1.2.0 2. 화면 생성 및 기능 추가 import 'package:dangi/screens/defaultLayout/..

  Read More
• [flutter] FutureBuilder 메서드의 AsyncSnapsot 과 Snapshot

  flutter/flutter 공부 2023. 2. 21. 11:34

  flutter 에서 외부 통신을 통해 가져오는 작업을 하게 되면 Future 에 담아줘야 하는데 받아온 결과의 타입이 Future 로 되어 있기 때문에 직접 하나 하나 담아주는 것보다는 FutureBuilder 를 이용해서 받아오도록 하는게 좋은 것 같아서 사용하고 있습니다. FutureBuilder( future: _calculation, // a previously-obtained Future or null builder: (BuildContext context, AsyncSnapshot snapshot) { List children; if (snapshot.hasData) { children = [ const Icon( Icons.check_circle_outline, color: Colors.gr..

  Read More
• [flutter] textfield 선택해서 키보드 올라온 후 다른곳 누르면 키보드 사라지게 하기

  flutter/flutter 공부 2021. 1. 29. 09:35

  flutter textfield 를 사용해서 입력받는곳을 만들긴 했는데 화면의 다른곳을 누르면 올라온 키보드가 사라지게 만들고 싶었습니다. 그래서 내용을 찾아보니 생각보다 간단하게 적용할 수 있었습니다. 제가 적용한 내용 일부입니다. 기존에 Container() 를 바로 썼는데 그 위에 GestureDetector() 를 적용한 뒤에 onTap 안에 FocusScope.of(context).unfocus(); 를 입력해주면 키보드가 화면에 올라왔을 때 다른곳을 누르면 다시 내려가게 됩니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 @override Widget build(BuildContext context) { return Scaffold( resizeToAvoidBo..

  Read More
• [flutter] toast 메세지 보이기

  flutter/flutter 공부 2020. 4. 19. 14:22

  안드로이드에서 사용자에게 정보를 보여주기 위해 잠깐 띄우는 토스트 메세지를 플러터에서도 구현해보도록 하겠습니다. 우선은 https://pub.dev/로 가서 fluttertoast로 검색을 합니다. 그럼 검색 결과로 fluttertoast가 나타나게 됩니다. 선택을 해주시고 installing 을 누릅니다. 그럼 사용방법에 대한 예시가 나타나게됩니다. 설명에 나온대로 따라하면 됩니다. pubspec.yaml 에 dependencies 안에 fluttertoast: ^4.0.1 를 추가해줍니다. 그리고 안드로이드 스튜디오에서 packages get 을 선택해줍니다. 그럼 아래와같이 패키지를 다운받게 됩니다. 다운이 완료되면 이제 사용할 수 있습니다. 이제 사용하는 방법을 알아보겠습니다. 1. 사용하고싶은 ..

  Read More
• [flutter] 화면 방향 고정시키기

  flutter/flutter 공부 2020. 4. 17. 11:44

  화면을 세로 또는 가로로 고정시키는 방법을 알아봅니다. 1. import 'package:flutter/services.dart'; 를 입력해줍니다. 2. StatelessWidget class build() 메서드 안에다가 SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]); 이런식으로 넣어줍니다. 3. 실행합니다. 끝! setPreferredOrientations 는 배열 형태로 파라미터 입력을 받습니다. 가로모드만 넣으면 가로방향만 보이게 되고 세로 방향까지 넣으면 세로 방향으로도 전환되게 할 수 있습니다. 그럼 실제 사용 코드를 확인해보겠습니다. 1. 한쪽으로만 고정시킬 경우 1 2 3 4 5 6 7 8..

  Read More