inflearn logo
강의

講義

知識共有

Flutterで作るLLMチャットボット (feat. Gemini)

4. 7 Flutter Gemini連携と環境変数の使用方法

오버플로우

80

cdway

投稿した質問数 23

0

text 에러난거 고치고 바로 실행 했더니 오버플로우 나네요

flutter 물어봤는데

답변이 길어서인지

어디가 문제인가요

에물레이터는 Pixel 7 API 34 (mobile)

image.png

 

flutter 챗봇 gemini 인공지능(ai)

回答 2

0

jasonkang

제가 답변이 길게 나오는 케이스를 테스트 하지 않아서 놓친 부분인데요,

overflow에러는 widget이 차지하려고 시도하는 영역이 본인에게 부여된 영역보다 많을 때 나타나는 에러입니다. 이런 경우에는 넘치게 공간을 차지하고자 하는 위젯을 Expanded로 감싸주시면 됩니다

Expanded(
              child: ListView.separated(
                itemCount: chatList.length,
                separatorBuilder: (context, index) => const SizedBox(height: 24),
                itemBuilder: (context, index) {
                  final chat = chatList[index];
                  Widget messageWidget = chat.role == 'user'
                      ? HumanMessage(content: chat.parts?.first is TextPart ? (chat.parts?.first as TextPart).text : '')
                      : AIMessage(content: chat.parts?.first is TextPart ? (chat.parts?.first as TextPart).text : '');
                  return messageWidget;
                },
              ),
            ),

이런식으로 수정하시면 Expanded의 child widget인 ListView가 남는 영역을 모두 차지하면서 스크롤이 가능해집니다. 추가로 Expanded로 감싸면서 ListView가 Column 내의 영역만 차지하기 ListView에 있던 shrinkWrap: true 옵션을 제거해도 정상적으로 동작합니다.

 

소스코드는 수정했으니 참고부탁드립니다. 또 정상적으로 동작하지 않거나 설명이 추가로 필요한 부분이 있으시면 말씀해주세요!

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. cdway님.

Flutter에서 화면이 오버플로우되는 문제는 일반적으로 UI 요소가 주어진 공간을 초과할 때 발생합니다. 이 경우, 다음과 같은 몇 가지 해결책을 시도해 볼 수 있습니다:

  1. Wrap with Scroll: 긴 텍스트나 큰 위젯으로 인해 오버플로우가 발생한다면 SingleChildScrollView로 감싸서 스크롤이 가능하도록 설정할 수 있습니다.
   SingleChildScrollView(
     child: Column(
       children: <Widget>[
         // Your content
       ],
     ),
   )
  1. Flexible or Expanded 사용: 특정 위젯이 공간을 유동적으로 사용하도록 Flexible이나 Expanded 위젯을 사용해 볼 수 있습니다.
   Flexible(
     child: Text('Your long text here...'),
   )
  1. TextOverflow 설정: 텍스트가 너무 길어 오버플로우되는 경우 Text 위젯의 overflow 속성을 설정하여 말줄임표(…)로 처리할 수 있습니다.
   Text(
     'Your long text here...',
     overflow: TextOverflow.ellipsis,
   )
  1. Resolution or Orientation 변경: 에뮬레이터 설정을 통해 화면 크기나 방향을 변경하여 문제가 해결되는지 확인할 수도 있습니다.

관련된 기존 질문으로는 아래 링크를 참고하시면, Flutter UI 처리에 대한 다양한 접근 방식을 확인할 수 있습니다:
- Flutter에서 Overflow 방지하는 방법

이미지 URL: 오버플로우 이미지

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

6-6

0

4

0

OAuth방식 강의 문의

0

9

0

클로드코드 유료플랜 할인 방법이 있을까요?

0

16

0

HTML2Design 플러그인 시, 클로드에서 코딩해서 만든 UI 예시 이미지 가져오기 오류

0

5

0

API Error : 400 에러의 원인과 해결방법이 궁금합니다!!

0

16

2

퍼미션 권한 설정 문의

0

18

2

실습 안떠요

0

14

0

Json 플러그인 사용시 variable collection 없음

0

12

1

커서에서 shift+enter가 안됩니다.

0

19

2

mcp 설치를 못하겠어요

0

30

2

강의노트는 어디있나요?

0

17

1

라이브러리 관련 질문 있습니다!

0

24

2

노션 학습 자료 권한 요청

0

16

1

환불 요청

0

28

2

output-styles은 Claude Code의 공식 기능이 아니라고 하는데 혹시 변경된걸까요?

0

20

2

클로드 변경

0

25

2

배리어블 목록 없음

0

22

3

Token 등록 방법 문의

0

19

1

/config 에서 output-style 을 변경

0

22

1

한국어 문제

0

25

2

part2강의 문의사항입니다.

0

19

2

또다른 오버플로우

0

73

2

에러가 생겨서

0

79

1

실전강의는 무엇인가요?

1

114

1