반응형 공부기록/Flutter9 [Flutter] 텍스트 길이가 길 경우 말 줄임표 사용하는 방법 Flutter에서 말 줄임표 사용하는 방법아래 그림과 같이 Text가 너무 길 경우 말 줄임표로 나타내는 방법에 대해서 알아보도록 하겠습니다. 코드 Text( itemList[index]['title'].toString(), style: const TextStyle( fontSize: 24.0, color: Colors.black, ), overflow: TextOverflow.ellipsis, ) 코드 설명 overflow: TextOverflow.ellipsis 부분은 텍스트가 위젯의 경계를 벗어날 경우 어떻게 처리할 것인지를 정의합니다. TextOverflow.ellipsis는 텍스트가 해당 영역을 벗어날 경우, 벗어나는 부분은 생략되고 대신에 말줄임표 (...)가 표시됩니다. 이렇게 하면 사용자는.. 2023. 7. 13. [Flutter] 이미지 없을 때 기본 이미지로 대체하기 이미지 없을 때 기본 이미지로 대체하기 위 그림처럼 이미지가 없으면 기본 이미지를 보여주는 예제는 아래와 같다. import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { final PageController _pageController = PageController(); int _currentPage = 0; String img_url_o = 'http://127.0.0.1:5000/api/image/sample'; String img.. 2023. 7. 12. [Flutter] 포커스에 따른 input 박스 색상 변화 구현 플러터를 활용한 검색창 UI 개선: 포커스에 따른 컬러 변화 구현 TextField와 InputDecoration 위젯을 사용한 검색창 UI 구현 이번 글에선 플러터를 활용해 검색창의 사용자 경험을 개선하는 방법에 대해 이야기하려고 합니다. 이번 포스팅의 핵심은 바로 "검색창의 포커스에 따라 아이콘과 테두리 색이 변화하는 기능"입니다. 이 기능을 통해 사용자는 검색창이 현재 활성화되어 있는지 쉽게 파악할 수 있게 됩니다. 첫 번째로 보실 부분은 `_SearchPageState` 클래스 내부에 선언된 `_focusNode`라는 인스턴스입니다. 이는 `FocusNode` 클래스의 인스턴스로, 해당 위젯이 현재 포커스를 가지고 있는지 아닌지를 판단하는 역할을 합니다. 초기에는 `initState()` 메소드에.. 2023. 7. 9. Flutter로 웹 앱 실행하기: 사용자 지정 호스트네임과 포트 설정 방법 Flutter 웹 앱 실행하기: 사용자 지정 호스트네임과 포트 설정 방법 flutter run -d edge --web-hostname 192.168.0.100 --web-port=8080 Flutter는 웹, 모바일, 데스크톱 등 다양한 플랫폼에서 애플리케이션을 개발하는데 사용되는 오픈 소스 프레임워크이다. 이번 포스팅에서는 Flutter로 개발한 웹 애플리케이션을 사용자 지정 호스트네임과 포트를 이용해 실행하는 방법에 대해 알아보겠습니다. Flutter 프로젝트를 실행하기 위해 flutter run 명령어를 사용합니다. 이때 -d 옵션은 사용할 디바이스를 선택하는 옵션으로, 이 예제에서는 'edge'를 사용했는데, 이는 Edge 브라우저에서 앱을 실행하겠다는 것을 나타낸다. -d 옵션에 대해 더 자세.. 2023. 7. 8. 이전 1 2 3 다음 728x90 반응형
