반응형 플러터5 [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] AppBar, BottomNavigator 구현(상단,하단은 고정 & body만 바뀌도록) Flutter에서 상단 바, 하단 네비게이션 구현하기 main.dart MainPage 위젯을 통해 구성된 애플리케이션이다. 애플리케이션의 전체적인 테마와 페이지 구성을 설정하고, 페이지 간 이동을 관리한다. MyApp: MaterialApp을 생성하여 애플리케이션 전체의 테마와 기본 설정을 지정. title은 애플리케이션의 제목을 설정하고, theme은 전체적인 테마 설정을 담고 있음. MainPage: StatefulWidget를 상속하여 페이지 이동과 BottomNavigationBar를 관리하는 위젯 _currentIndex 변수를 사용하여 현재 선택된 페이지 인덱스를 관리하며, _onItemTapped 함수는 탭 이벤트를 처리하여 _currentIndex를 업데이트 _pages 리스트에는 홈페이.. 2023. 7. 5. 이전 1 2 다음 728x90 반응형
