sollog

23 01 27 Fri 본문

자기계발/Soda

23 01 27 Fri

Solmi Kim 2023. 1. 27. 14:57
728x90
반응형

오늘의 목표

📍 class의 종류를 알고 코드를 실행해본다.

📍 class의 사용 예시를 알고 각 class를 어떤 경우에 사용하는지 파악한다.

📍 나만의 boiler plate를 만들며 배운 내용을 정리한다.

 

1) Card class

2) Chip class

3) CircularProgressIndicator calss

4) Tooltip class

 

 

 

1 > Card class 

모서리가 약간 둥글고 입면 있는 그림자 채널

이런 느낌 return 되는 클래스 안 위젯에

return : Center (

        child: Card(

를 두면 된다. 

 

안에 Row 이나 Column에   TEXT 넣고 BUY TiCKETS , LISTEN 을 하면 된다. 

 

2 > Chip class

콘테이너와 칩의 차이점? 

콘테이너는 래핑을 할 수 있는데,

칩은 X - > 그림자는 ?

 

사이즈박스 콘테이너 차이점?

 

 

 

 

 

 

 

 

 

 

 

 

 

칩은 속성, 텍스트, 엔터티 또는 작업을 나타내는 압축 요소입니다.

null이 아닌 onDeleted 콜백을 제공하면 칩을 삭제하기 위한 버튼이 칩에 포함됩니다.

그 조상은 Material , MediaQuery , Directionality 및 MaterialLocalizations 를 포함해야 합니다 . 일반적으로 이러한 모든 위젯은 MaterialApp 및 Scaffold 에서 제공 합니다. label 및 clipBehavior 인수는 null 이 아니어야 합니다.

3) CircularProgressIndicator class

앱이 작동중이나, 진행중인 걸 

화면에 나탄내고 싶엇음

 

원형 방식으로 행 방식

라이너 프로그래스 인디케이터도 있음 - > 선으로 나타내

남은 시간 같은 건 적용하지않음

  단일 색상을 원할경우에는 alwaysStoppedAnimation

 

독특한점

StokeWidth로 진행 알림 표시기를 얇거나 두껍게 표현할 수 있음 

 

진행을 표시하는 방법에는 두가지가 있는데,

 첫번쨰는 결정하는 것 determine 이 있고,

두번째는 불확실한 Indetermine 이있다.

 

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ProgressIndicatorExample(),
    );
  }
}

class ProgressIndicatorExample extends StatefulWidget {
  const ProgressIndicatorExample({super.key});

  @override
  State<ProgressIndicatorExample> createState() =>
      _ProgressIndicatorExampleState();
}

class _ProgressIndicatorExampleState extends State<ProgressIndicatorExample>
    with TickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    controller = AnimationController(
      /// [AnimationController]s can be created with `vsync: this` because of
      /// [TickerProviderStateMixin].
      vsync: this,
      duration: const Duration(seconds: 5),
    )..addListener(() {
        setState(() {});
      });
    controller.repeat(reverse: true);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'Circular progress indicator with a fixed color',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            CircularProgressIndicator(
              value: controller.value,
              semanticsLabel: 'Circular progress indicator',
            ),
          ],
        ),
      ),
    );
  }
}

실행결과

 

 

4 > Tooltip class

그림을 사용해 의미를 전달

이미지와 시각적인 내용을 담음

하지만 시각장애인들 잘 몰라.--> 답답해. 

 

툴팁을 이용해

메세지를 넣고

그 기능이 어떤 기능인지 나타내는 것임

앱 아이콘을 클릭하거나 길게 누를때, tooltip에 의미를담아

사용자가 원하는 대로, tooltip 상의 수직 간격( verticalOffset) , 높이 등을 설정할 수 있음.

 

IconButton과 같은 중요한 거 툴팁에 있음.

 

툴팁이 하는 일이뭐냐면

위젯의 텍스트 표현을 증명, 즉 보여주므로서 화면 상에서 뭐가 뭔지, 어떤 아이콘이 어떤 기능인지를 나타내는 거야 

 

다트 패드에 있는 예시1을  보자.

import 'package:flutter/material.dart';

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

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

  static const String _title = 'Tooltip Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: TooltipSample(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Tooltip(
      message: 'I am a Tooltip',
      child: Text('Hover over the text to show a tooltip.'),
    );
  }
}

실행결과.

 

 

 

 

 

 

 

이 Hover over the text to show a tooltip 을 길게  클릭해주면, 

i am a Tooltip 이 나온다.

보물찾기같은 느낌임 숨겨져있어. 

 

여기서 tooltip 안의 Messagsage가  'I am a Tooltip' 인 거임. 

 

예시2를 보자.

This sample shows the creation of a ㅊ with a changing value. 

순환 진행률(CircularProgressIndicator)을 나나태는데, 스위치를 통해서 진행을 멈출수도, 다시 재생할 수 도 있다.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          useMaterial3: true, colorSchemeSeed: const Color(0xff6750a4)),
      home: const ProgressIndicatorExample(),
    );
  }
}

class ProgressIndicatorExample extends StatefulWidget {
  const ProgressIndicatorExample({super.key});

  @override
  State<ProgressIndicatorExample> createState() =>
      _ProgressIndicatorExampleState();
}

class _ProgressIndicatorExampleState extends State<ProgressIndicatorExample>
    with TickerProviderStateMixin {
  late AnimationController controller;
  bool determinate = false;

  @override
  void initState() {
    controller = AnimationController(
      /// [AnimationController]s can be created with `vsync: this` because of
      /// [TickerProviderStateMixin].
      vsync: this,
      duration: const Duration(seconds: 2),
    )..addListener(() {
        setState(() {});
      });
    controller.repeat(reverse: true);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Circular progress indicator',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 30),
            CircularProgressIndicator(
              value: controller.value,
              semanticsLabel: 'Circular progress indicator',
            ),
            const SizedBox(height: 10),
            Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    'determinate Mode',
                    style: Theme.of(context).textTheme.titleSmall,
                  ),
                ),
                Switch(
                  value: determinate,
                  onChanged: (bool value) {
                    setState(() {
                      determinate = value;
                      if (determinate) {
                        controller.stop();
                      } else {
                        controller
                          ..forward(from: controller.value)
                          ..repeat();
                      }
                    });
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

SwitchButton 초기설정값이 bool determinate = false; 이다.

때문에 처음 run을 돌릴 경우에, 값이 꺼져있고, 서큘러가 돌아간다.

폴스 -> 폴스 값 변화 없으니까 그대로고, 진행돼.

 

 

하지만 저 determinate Mode를 true 값, 즉 켜주면,

값이 켜지고, 초깃값과 서큘러가 돌아가지않는다. 왜냐 ? 초기값과 다르니까. 

폴스 -> 트루 값 변화 있으니까 진행되었던게 멈춰.

 

 

showDatePicker function // 날짜 

import 'package:flutter/material.dart';

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

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      restorationScopeId: 'app',
      title: _title,
      home: MyStatefulWidget(restorationId: 'main'),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key, this.restorationId});

  final String? restorationId;

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// RestorationProperty objects can be used because of RestorationMixin.
class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with RestorationMixin {
  // In this example, the restoration ID for the mixin is passed in through
  // the [StatefulWidget]'s constructor.
  @override
  String? get restorationId => widget.restorationId;

  final RestorableDateTime _selectedDate =
      RestorableDateTime(DateTime(2021, 7, 25));
  late final RestorableRouteFuture<DateTime?> _restorableDatePickerRouteFuture =
      RestorableRouteFuture<DateTime?>(
    onComplete: _selectDate,
    onPresent: (NavigatorState navigator, Object? arguments) {
      return navigator.restorablePush(
        _datePickerRoute,
        arguments: _selectedDate.value.millisecondsSinceEpoch,
      );
    },
  );

  static Route<DateTime> _datePickerRoute(
    BuildContext context,
    Object? arguments,
  ) {
    return DialogRoute<DateTime>(
      context: context,
      builder: (BuildContext context) {
        return DatePickerDialog(
          restorationId: 'date_picker_dialog',
          initialEntryMode: DatePickerEntryMode.calendarOnly,
          initialDate: DateTime.fromMillisecondsSinceEpoch(arguments! as int),
          firstDate: DateTime(2021),
          lastDate: DateTime(2022),
        );
      },
    );
  }

  @override
  void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
    registerForRestoration(_selectedDate, 'selected_date');
    registerForRestoration(
        _restorableDatePickerRouteFuture, 'date_picker_route_future');
  }

  void _selectDate(DateTime? newSelectedDate) {
    if (newSelectedDate != null) {
      setState(() {
        _selectedDate.value = newSelectedDate;
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text(
              'Selected: ${_selectedDate.value.day}/${_selectedDate.value.month}/${_selectedDate.value.year}'),
        ));
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: OutlinedButton(
          onPressed: () {
            _restorableDatePickerRouteFuture.present();
          },
          child: const Text('Open Date Picker'),
        ),
      ),
    );
  }
}

 

 

open data picker 을 눌러주었을 때, 

 

이 캘린터 화면을 띄게 하는 것임. 

 

디스플레이 기능은 화면을 하위 화면으로 분할할 수 있습니다. anchorPoint에 가장 가까운 것은 내용을 렌더링하는 데 사용됩니다.

anchorPoint가 제공되지 않은 경우 방향성이 사용됩니다:

 

 

선택적인 textDirection 인수를 사용하여 달력보기의 텍스트 방향을 TextDirection.ltr 또는 TextDirection.rtl 을 설정할 수 있다.

 

TextDirection.ltr의 경우 anchorPoint(고정점)는 Offset입니다.내용이 왼쪽 상단 하위 화면에 표시됩니다.
TextDirection.rtl의 경우 anchorPoint(고정점)는 Offset(double.maxFinite, 0)이며, 이 경우 내용이 오른쪽 상단 하위 화면에 나타납니다.


anchorPoint(고정점)가 제공되지 않고 트리에 방향성 상위 위젯이 없는 경우, 위젯은 디버그 모드에서 빌드 중에 어설션(assertion 역설) 됩니다.

 

ltr 과 rtl의 차이? 

고정점이 다름.

왼쪽 상단이냐, 오른쪽 상단 하위 냐가 다름.

 

 

 

728x90
반응형

'자기계발 > Soda' 카테고리의 다른 글

23 01 31 Tue  (0) 2023.01.31
23 01 30 Mon  (0) 2023.01.30
23 01 26 Thu  (1) 2023.01.26
23 01 25 Wen  (0) 2023.01.25
23 01 20 Fri  (0) 2023.01.20
'자기계발/Soda' Related Articles more