[카테고리:] Flutter

Flutter에서 RichText를 사용해 다양한 텍스트 스타일링 적용하기

RUDY Leave a comment

Flutter는 텍스트 스타일링을 지원하는 RichText 위젯을 제공합니다. RichText를 사용하면 텍스트의 서로 다른 부분에 서로 다른 스타일을 적용할 수 있습니다. 예를 들어, 서로 다른 색상, 글꼴 크기 및 글꼴 스타일을 사용할 수 있습니다. 이를 통해 더욱 다양하고 풍부한 텍스트 효과를 적용할 수 있습니다.

다음은 Flutter에서 RichText를 사용하는 예시 코드입니다. 이 예시 코드에서는 두 개의 TextSpan을 RichText 위젯에 추가하고 각각 서로 다른 스타일을 적용합니다.

RichText(
  text: TextSpan(
    text: 'Flutter is ',
    style: TextStyle(
      color: Colors.black,
      fontSize: 20.0,
      fontWeight: FontWeight.bold,
    ),
    children: <TextSpan>[
      TextSpan(
        text: 'awesome',
        style: TextStyle(
          color: Colors.blue,
          decoration: TextDecoration.underline,
        ),
      ),
      TextSpan(
        text: '!',
        style: TextStyle(
          color: Colors.black,
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
);

이 예시 코드에서는 RichText 위젯을 생성하고, text 속성을 설정하여 TextSpan 객체를 전달합니다. TextSpan 객체는 첫 번째 TextSpan에는 “Flutter is”라는 텍스트를 나타내는 TextStyle 객체를 포함하고, 두 번째 TextSpan에는 “awesome”라는 텍스트를 나타내는 TextStyle 객체를 포함합니다.

첫 번째 TextSpan의 TextStyle 객체는 글꼴 크기가 20, 굵은 글꼴, 검은색 텍스트로 설정됩니다. 두 번째 TextSpan의 TextStyle 객체는 파란색으로 텍스트를 강조하고 밑줄을 추가합니다.

RichText 위젯은 이 두 개의 TextSpan을 결합하여 “Flutter is awesome!”라는 텍스트를 나타냅니다. 결과적으로, “Flutter is”는 검은색 굵은 글꼴로 표시되고, “awesome”는 파란색 밑줄로 강조된 텍스트로 표시됩니다. 마지막으로, 끝에는 다시 검은색 굵은 글꼴로 된 느낌표가 있습니다.

Flutter의 ElevatedButton 사용법과 특징 설명

RUDY Leave a comment

Flutter의 ElevatedButton은 일반적인 버튼과는 다르게 3D 효과를 적용하여 눌린 것처럼 보이는 버튼을 만들어줍니다. 이 버튼은 Material Design 스타일의 디자인을 적용할 수 있으며, 버튼의 색상, 텍스트, 그림자 등을 쉽게 커스터마이즈할 수 있습니다.

ElevatedButton은 Material Design 스타일의 디자인 가이드에 따라 생성되며, 버튼이 눌렸을 때 3D 효과를 제공합니다. ElevatedButton은 onPressed 콜백을 제공하여 버튼이 클릭되었을 때 수행되는 작업을 지정할 수 있습니다.

다음은 ElevatedButton을 생성하는 예시입니다.

ElevatedButton(
  onPressed: () {
    // 버튼이 클릭되었을 때 수행될 작업
  },
  child: Text('버튼'),
)

ElevatedButton에는 많은 속성이 있으며, 버튼의 색상, 모양, 그림자 등을 쉽게 변경할 수 있습니다. 예를 들어, ElevatedButton의 색상을 변경하려면 다음과 같이 코드를 작성할 수 있습니다.

ElevatedButton(
  onPressed: () {
    // 버튼이 클릭되었을 때 수행될 작업
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // 버튼의 배경 색상
  ),
  child: Text('버튼'),
)

이처럼 ElevatedButton은 쉽게 사용할 수 있으며, Material Design 스타일의 3D 버튼을 쉽게 만들어줍니다.

Flutter – scaffold에 전역 스타일 적용

RUDY Leave a comment

scaffold widget의 appBar에 대해서 전역 스타일일 적용하는 방법

개발하는 앱에서 AppBar를 사용하고 있다면 일괄적으로 style을 적용해야할것이다.

// main.dart

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        appBarTheme: const AppBarTheme(
            backgroundColor: Colors.white,
            titleTextStyle: TextStyle(
              color: Colors.black,
              fontSize: 18,
              fontWeight: FontWeight.w100,
            )),
      ),
      home: const SignUpScreen(),
    );
  }
}

main.dart의 theme: ThemeData를 통해 scaffold 전역 스타일을 지정할수 있다.

예를 들어 appBarTheme: AppBarTheme는 scaffold의 AppBar에 적용되는 스타일을 정의하는데 내용은 아래와 같다.

// appbar의 background color
backgroundColor: Colors.white

// title 속성의 Text 스타일
ttitleTextStyle: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.w100,
)

Flutter – svg 파일 사용하기

RUDY Leave a comment
https://pub.dev/packages/flutter_svg

일반 이미지처럼 사용하면 될줄 알고 사용하니 계속 오류를 토해내고 있어 검색을 해보니 svg파일을 사용하기위해서 별도의 package를 사용해야했다.

svg 파일 사용하기 위해 dependencie를 추가합니다.

# pubspec.yaml 파일에 flutter_svg dependencie를 추가.
dependencies:
  flutter_svg: ^1.1.6

// example
child: Container(
  child: SvgPicture.asset(
    'assets/img.svg',
    width: 100,
    height: 100,
  ),
),

Flutter – SizedBox

RUDY Leave a comment

https://api.flutter.dev/flutter/widgets/SizedBox-class.html

사이즈를 강제하는 Widget으로 부모 Widget이 허용하지 않을경우 무시된다고 한다. 사용 용도를 확인하기위해 많이 검색해보았지만 실제 개발할때 사용되는 방법은 widget간 간격을 조정할때 많이 사용된다고 하고 그 이외에는 다른 Widget을 사용하는것 같아.

투명한 박스 생성

아무런 속성을 추가하지 않고 높이:50, 너비:50인 투명한 박스를 생성한다.

return SizedBox(
  width: 100,
  height: 100,
);

색상이 들어간 박스 생성

SizedBox에 색상을 바로 설정할수없고, 다른 widget의 속성으로 설정할수 있다.

return SizedBox(
  width: 50,
  height: 50,
  child: Container(
    color: Colors.red,
  ),
);

SizedBox는 사이즈 설정에 최적화되어 있고 다른 속성을 추가하기위해서는 다른 widget을 사용해야한다.

만약 빨간색 박스가 필요하다면 아래와 같이 Container widget을 사용하는것이 효율적으로 보인다.

return Container(
  width: 50,
  height: 50,
  color: Colors.red,
);

SizedBox widget은 Container widget에 비해 적은 리소스를 사용하므로 widget끼리의 간격조정에 많이 사용되는것으로 보인다. 

body: Column(
  children: [
    BoxWidget(),
    SizedBox(height: 50,),
    BoxWidget(),
  ],
)

Flutter – SnackBar

RUDY Leave a comment 
import 'package:flutter/material.dart';

void main() => runApp(const SnackBarDemo());

class SnackBarDemo extends StatelessWidget {
  const SnackBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SnackBar Demo'),
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatelessWidget {
  const SnackBarPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: Text('Yay! A Snack Bar!'),
          );
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        child: const Text('Show SnackBar'),
      ),
    );
  }
}

SnackBarAction 추가하기

onPressed: () {
  final snackBar = SnackBar(
    content: Text('Yay! A Snack Bar!'),
    action: SnackBarAction(
      label: 'Close',
      onPressed: () {
        ScaffoldMessenger.of(context).hideCurrentSnackBar();
      },
    ),
  );
  ScaffoldMessenger.of(context).showSnackBar(snackBar);
},