# TextSpan

tygerhwang

검색창 만들어보기 - 텍스트 필터링 Naver Developer 검색 > 블로그 Documents Postman API Platform flutter_bloc | Flutter Package http | Dart Package 이번 글에서는 만들어 보면 좋을 기능에 대해서 작성해 보도록 하겠다. 개발해 볼 기능은 바로 네이버, 크롬과 같은 검색창에서 일치하는 검색어만 필터링 해주는 기능이다. 해당 기능을 개발해 보기 전에는 매우 쉽다고 생각할 수도 있는데, 전혀 그렇지 않다. 고려해주어야 할 요소도 너무

steadygo247

🔎Flutter에서 텍스트 설정하기 > 텍스트를 화면에 그려주는 Text() 텍스트에 스타일을 주는 TextStyle() 텍스트마다 다양한 스타일을 주고 싶을때 사용하는 RichText() 또는 Text.rich() 문자열을 분리시켜주는 TextSpan() RichText는 TextSpan으로 구성된 트리로 이루어진다. 🔎Text() 기본적인 text 입력 🔎Text 위젯 기본형 🔎TextStyle() textAlign : 문자열 배치 style : 문자 스타일지정(굵기,색,사이즈 ... ) ![](https://velog.velcdn.com/images/steadygo247/post/1b089dd7-f136-46f1-a1e9-313a9caa0bb4/ima

nicesawo

참고 사이트 https://eunjin3786.tistory.com/421 > 아래 예제 처럼 같은 줄에 서로 다른 TextStyle 가진 Text 만들 때 사용한다. > 위젯 구조 > 참고 예시 코드 문서의 예제처럼 Hello의 children으로 bold랑 world를 두기 싫으면 이렇게 할 수 도 있습니다. UI는 똑같이 구성됩니다.

baekmoon1230

여러 개의 다른 스타일을 가진 문자(또는 위젯을)를 화면에 그린다. RichText - TextSpan TextSpan의 children 속성을 이용하여 문자별로 다양한 스타일을 지정할 수 있다. RichText - WidgetSpan 위 방식과 똑같은 방식이지만 WidgetSpan을 이용하여 위젯으로 다양하게 꾸밀 수도 있다.

gunwng123

위의 사진처럼 길이가 긴 String 내에 특정 단어에만 다른 TextStyle을 적용해야 하는 경우가 있다. 강조를 위해서, 또는 해당 단어에 Recognizer를 추가하는 경우등등 상황은 여러가지 일수 있다. 이럴때 RichText를 응용하여 사용하면 된다. >코드에 관한 설명은 주석을 참고하면 된다. 전체적으로 적용할 Style은 leftOverStyle에 정의를 하면 된다. 키워드(위의 코드의 wordToStyle ) 에 적용할 스타일은 wordStyle에 정의를 하면 된다. 만약 키워드를 터치했을 때 화면 이동등 변화를 적용하고 싶으면 키워드의 textSpan에 recognizer를 추가하여 사용하면 된다. > 해당 코드 출

gunwng123

아래와 같이 하나의 Text위젯에 다양한 TextStyle을 적용해야 하는 경우가 있다. 이 문제는 하나의 Text Widget으로 해결하는 것은 불가능 하다. 이럴 때 사용하는 위젯이 RichText이다. 코드 예시는 아래와 같다. > RichText위젯 아래에 자식 위젯으로 TextSpan위젯을 가졌다. TextSpan 위젯은 특정 길이의 문자(text)를 한 단위로 하여 스타일(style)을 적용하는 데 사용한다. 자식 위젯으로 TextSpan 리스트를 가질 수 있으며, 모두 한 문단으로 화면에 그려진다. > 보통 Text위젯에 터치 이벤트를 적용시키려면 InkWell 또는 GestureDetector로 해당 위젯을 감싸줘야 한다. 하지만 전체 텍스트

pou

+ ## New Widget **Spacer : Row 와 Column 같은 Flex Container 위젯에서 빈 공간을 만들때 사용 TextSpan : 한줄의 텍스트 마다 다른 style을 적용 시킬때 사용 FittedBox : 상위 위젯의 크기에 맞게 하위 위젯의 사이즈를 조절할때 사용 ** >+ ## New Package 없음 Source Code : https://github.com/SeongWoo-97/FlutterWa