Flutter UI 위젯 | SingleChildScrollView | RichText

Flutter 위젯에 뭐가 있는지 알아보기

• Widget Catalog https://docs.flutter.dev/ui/widgets
• Flutter Widget of the Week 유튜브 플레이리스트 전부 보기
• Package of the Week

 

클래스의 build 메소드 내부 구조:

• Scaffold 위젯은 앱의 기본적인 시각적 구조를 제공합니다.
• SafeArea 위젯은 화면의 안전 영역 내에서 콘텐츠를 유지합니다.
• Column 위젯은 자식 위젯들을 세로로 배열합니다.
• AspectRatio, Padding, Row 등의 위젯은 레이아웃을 구성하는 데 사용됩니다.
• Text, Icon, Image.network 등은 콘텐츠를 표시합니다.

 

subTitle 및 description 긴 문장 처리

1. TextOverflow 설정: Text 위젯에서 overflow 속성을 사용하여 텍스트가 넘칠 때 어떻게 처리할지 정할 수 있습니다. TextOverflow.ellipsis는 넘치는 텍스트를 말줄임표(...)로 표시합니다. 만약 전체 텍스트를 보여주고 싶다면, 이 속성을 제거하거나 변경해야 합니다.
2. maxLines 설정: maxLines 속성은 표시할 최대 줄 수를 정합니다. 이 값을 증가시키거나, 전체 텍스트를 표시하고자 한다면 이 속성을 제거하세요.

 

레이아웃 오버플로우 문제를 해결하기 위해 SingleChildScrollView를 사용하고, Expanded 또는 Flexible 위젯을 적절히 배치해야 합니다.

SingleChildScrollView 추가

SafeArea 내부의 Column 위젯을 SingleChildScrollView로 감싸서 전체를 스크롤 가능하게 만듭니다. 이렇게 하면 화면에 맞지 않는 내용도 스크롤을 통해 볼 수 있습니다.

Expanded 또는 Flexible 추가

Row 내부에서 오버플로우가 발생하는 경우, Expanded 또는 Flexible 위젯을 사용하여 자식 위젯들이 할당된 공간에 맞도록 조정할 수 있습니다. 예를 들어, secondArea 메소드 내의 Row 위젯에서 Column을 Expanded로 감쌀 수 있습니다.

 

각 줄 끝에 \\n을 추가하면 Flutter가 해당 위치에서 새 줄로 넘어갑니다.

코드 들여쓰기 자동 맞춤 단축키

Android Studio 또는 IntelliJ IDEA와 같은 IDE에서 코드 들여쓰기를 자동으로 맞추려면 다음 단축키를 사용할 수 있습니다:

• Windows/Linux: Ctrl + Alt + L
• macOS: Cmd + Option + L

이 단축키는 현재 열려 있는 파일의 코드 포맷을 자동으로 정리해줍니다. 전체 프로젝트 또는 특정 폴더에 대해 포맷을 적용하려면, 해당 폴더나 프로젝트를 우클릭한 다음 Reformat Code 옵션을 선택하세요.

 

일부 텍스트에만 다른 스타일 적용:

RichText 위젯과 TextSpan을 사용할 때, 각각의 텍스트 조각에 대해 스타일을 개별적으로 지정해야 합니다. 이는 볼드 처리 같은 특정 스타일을 일부 텍스트에만 적용할 때 필요한 접근 방식입니다. 기존의 Text 위젯 대신 RichText 위젯을 사용하면, 복잡한 텍스트 스타일링이 가능해집니다.

복잡한 텍스트를 RichText로 변환하기 위해서는 다음과 같은 단계를 따릅니다:

1. 전체 텍스트를 분석: 전체 텍스트를 살펴보고, 스타일을 적용하고 싶은 부분을 확인합니다.
2. TextSpan 분할: 스타일을 적용하려는 각 부분을 별도의 TextSpan으로 나눕니다. 볼드 처리가 필요한 부분에는 별도의 스타일을 적용하고, 나머지 텍스트는 기본 스타일을 사용합니다.
3. RichText 구성: 이 TextSpan들을 RichText 위젯의 children으로 구성합니다.

예를 들어, "Flutter is awesome and powerful"라는 문장에서 "awesome"과 "powerful"을 볼드 처리하려면 다음과 같이 작성할 수 있습니다:

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'Flutter is '),
      TextSpan(text: 'awesome', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' and '),
      TextSpan(text: 'powerful', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

이 방식은 텍스트의 각 부분을 개별적으로 관리할 수 있지만, 전체 텍스트를 TextSpan으로 나누어서 적용해야 한다는 점에서 다소 번거로울 수 있습니다. 그러나 이는 볼드, 이탤릭, 색상 변경 등 다양한 스타일을 텍스트의 특정 부분에 적용할 수 있는 가장 효과적인 방법입니다.

다른 방법으로는 HTML 또는 Markdown 위젯 사용: Flutter에는 HTML 또는 Markdown 형식의 텍스트를 해석하여 표시할 수 있는 패키지가 있습니다. 이러한 패키지를 사용하면 HTML 태그나 Markdown 구문을 사용하여 텍스트의 일부를 볼드 처리할 수 있습니다. 예를 들어, flutter_html 또는 flutter_markdown 패키지를 사용할 수 있습니다. 그러나 이러한 패키지들은 추가적인 의존성을 포함시키는 것을 의미하며, 프로젝트의 크기와 복잡성이 증가할 수 있습니다.

 

• [Refactor] - [Extract Flutter Widget]: 자주 사용하는  특정 코드 블록을 별도의 위젯으로 추출하는 리팩토링 기능
• Lorem ipsum - 실제 콘텐츠가 들어갈 자리를 예시하기 위해 사용되는 더미 텍스트(의미 없는 문장).  디자인 레이아웃, 웹사이트 또는 앱 프로토타입을 제작할 때 실제 콘텐츠가 채워지기 전에 이를 사용하여 텍스트 블록의 모양을 가늠할 수 있습니다.
• LottieFiles: Adobe After Effects를 사용하여 생성된 애니메이션을 JSON 형식으로 변환하는 라이브러리

 

https://github.com/mybuenoday/flutter-basic/blob/main/lib/23_12_20/00_main.dart