[Linux/Flutter] 플러터 텍스트 클릭시 색상 변경 예제(GestureDetector)

 

목차

1. 리눅스 Flutter 개발 환경 구성 예제 이전 포스팅 링크 및 설명
2. 리눅스 Flutter "Running Gradle task 'assembleDebug'" 에러 해결법 예제 이전 포스팅 링크 및 설명
3. 리눅스 Flutter 텍스트 위젯 여러개 출력 예제 이전 포스팅 링크 및 설명
4. 리눅스 Flutter Text 위젯 폰트 크기 설정하여 화면에 출력 예제
5. 리눅스 Flutter Text 위젯 클릭시 폰트 색상 변경 예제

 

 

 

 

 

 

 

 

 

리눅스 Flutter 개발 환경 구성 예제 이전 포스팅 링크 및 설명

이전 포스팅에서는 리눅스에서 플러터(Flutter) 개발 환경을 구성하는 방법에 대해 설명했습니다. 플러터는 크로스 플랫폼 앱 개발을 위한 프레임워크로, 리눅스에서도 사용할 수 있습니다. 해당 포스팅에서는 플러터 개발을 위한 필수 도구 설치 방법과 개발 환경 설정에 대해 자세히 다루었습니다. 플러터 개발을 시작하려는 분들께 도움이 될 수 있는 내용이니 참고해주세요. 특히 Flutter 공식 홈페이지에서 SDK 등을 다운로드하는 방법이 아래 포스팅에 포함되어있습니다.

 

2024.01.19 - [Flutter] - [Linux/Flutter] 플러터 개발 환경 구성 예제 - 1(플러터 SDK 다운로드 및 환경변수 설정)

[Linux/Flutter] 플러터 개발 환경 구성 예제 - 1(플러터 SDK 다운로드 및 환경변수 설정)

 

 

 

 

 

 

 

리눅스 Flutter "Running Gradle task 'assembleDebug'" 에러 해결법 예제 이전 포스팅 링크 및 설명

다음으로 이전 포스팅에서는 리눅스에서 플러터(Flutter) 프로젝트를 빌드할 때 발생할 수 있는 "Running Gradle task 'assembleDebug'" 에러에 대한 해결법을 알려드렸습니다. 해당 에러는 플러터 프로젝트를 빌드하는 과정에서 Gradle 작업이 제대로 수행되지 않는 경우 발생할 수 있습니다. 이전 포스트에서는 이러한 에러가 발생하는 원인과 해결 방법을 상세히 설명하였으니, 해당 포스트를 참고하시기 바랍니다. Gradle을 초기화하고 다시 빌드함으로써 이러한 실행 불가 오류를 해결할 수 있습니다. 아래는 해당 포스팅 링크입니다.

 

2024.01.25 - [Flutter] - [Linux/Flutter] 플러터 에뮬레이터 앱 실행시 "Running Gradle task 'assembleDebug'" 멈춤 현상 해결법 예제

[Linux/Flutter] 플러터 에뮬레이터 앱 실행시 "Running Gradle task 'assembleDebug'" 멈춤 현상 해결법 예제

 

 

 

 

 

 

 

리눅스 Flutter 텍스트 위젯 여러개 출력 예제 이전 포스팅 링크 및 설명

마지막으로 이전 포스팅에서는 리눅스에서 플러터(Flutter)를 사용하여 텍스트 위젯을 여러 개 출력하는 예제를 다뤘습니다. 플러터의 텍스트 위젯은 화면에 텍스트를 표시하는 데 사용되며, 이를 여러 개 출력하는 방법에 대해 자세히 설명하였습니다. 해당 예제를 통해 플러터에서 여러 개의 텍스트 위젯을 다루는 방법을 익힐 수 있습니다. 오늘 포스팅에서는 이러한 Text 위젯을 클릭하였을 때 색상을 변경하는 방법에 대해 알아볼 예정입니다. 이전에 텍스트를 여러개 출력하는 방법이 궁금하시다면 아래 포스팅을 참고해주세요.

 

2024.01.25 - [Flutter] - [Linux/Flutter] 플러터 텍스트 여러개 띄우기 예제(Flutter Chidren Text Add)

[Linux/Flutter] 플러터 텍스트 여러개 띄우기 예제(Flutter Chidren Text Add)

 

 

 

 

 

 

 

리눅스 Flutter Text 위젯 폰트 크기 설정하여 화면에 출력 예제

아래는 리눅스에서 플러터(Flutter)를 사용하여 텍스트 위젯의 폰트 크기를 설정하여 화면에 출력하는 예제입니다. 플러터의 텍스트 위젯은 폰트 크기를 조정하여 텍스트를 다양한 크기로 표시할 수 있습니다. 이 예제에서는 폰트 크기를 설정하는 방법과 함께 텍스트 위젯을 화면에 출력하는 방법을 설명하였습니다. 직접 아래의 코드를 작성하여 실행해보세요.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('테스트 '),
        ),
        body: Center(
          child: Text('폰트 크기를 100으로!', style: TextStyle(fontSize: 100)),
        ),
      ),
    );
  }
}

 

Flutter에서 Text 위젯의 TextStyle과 fontSize로 크기를 조절한 모습

 

 

 

 

 

 

리눅스 Flutter Text 위젯 클릭시 폰트 색상 변경 예제

아래는 플러터(Flutter)를 사용하여 텍스트 위젯을 클릭했을 때 폰트 색상을 변경하는 예제입니다. 플러터의 텍스트 위젯은 사용자의 마우스 클릭 등 이벤트에 따라 다양한 변화를 줄 수 있는데, 이를 이용하여 텍스트 위젯을 클릭했을 때 폰트 색상이 변경되는 기능을 구현할 수 있습니다. 아래는 예제 코드입니다. GestureDetector Child로 Text 위젯을 포함시키고 onTap 이벤트를 통해 처리 함수를 호출할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Color _textColor = Colors.black; // 초기 폰트 색상

  void _changeTextColor() {
    // 폰트 색상 변경
    setState(() {
      if (_textColor == Colors.black) {
        _textColor = Colors.red;
      } else {
        _textColor = Colors.black;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Text 위젯 폰트 색상 변경 예제'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: _changeTextColor, // 클릭 시 폰트 색상 변경 함수 호출
            child: Text(
              '클릭해보세요',
              style: TextStyle(color: _textColor, fontSize: 100), // 폰트 색상 설정
            ),
          ),
        ),
      ),
    );
  }
}

 

Flutter에서 폰트를 클릭하기 이전엔 검정색이다.

 

폰트를 클릭하면 빨간색으로 변경되는 모습.