개발

플러터 이미지의 모서리를 둥글게

코지식 2024. 9. 23. 01:16
반응형

 

 

 

 

 

ClipRRect 위젯

이미지의 모서리를 둥글게

ClipRRect(
    child: Image.asset('assets/no-picture-taking.png'),
    borderRadius: BorderRadius.circular(10),
  )
  
  
  예제
  Container(
    width: double.infinity,
    height: 170,
    child: newsItem['urlToImage'] != null
        ? ClipRRect(
            child: Image.network(
              newsItem['urlToImage'],
              fit: BoxFit.cover,
            ),
            borderRadius: BorderRadius.circular(10),
          )
        : ClipRRect(
            child: Image.asset('assets/no-picture-taking.png'),
            borderRadius: BorderRadius.circular(10),
          ),
  )

===========================================================================================

 

 

 

 

 


================================
pubspc.yaml
flutter pub add 패키지명
flutter pub get


설정
-개발시 귀찮은 lint룰 제거
  analysis_options.yaml 파일의 include: package:flutter_lints/flutter.yaml 라인 주석처리함
  
======================================
디버그 배너 제거
 메인의 MaterialApp 속성에서 debugShowCheckedModeBanner: false,
 
=======================================
리스트뷰 ListView
리스트뷰에서 컨텐츠가 Column 영역 의 중간으로 가려면 shrinkWrap: true로 주면 된다.
ListView(
            shrinkWrap: true,
            children: []
)

 =======================================
 Provider 예제
 
 class Dog {
  final String name;
  final String breed;
  int age;
  Dog({
required this.name,
required this.breed,
this.age = 1,
  });
}

 객체를 사용할 위젯의 상위에 Provider 위젯을 감싸고 아래와 같이 객체명, create 를 지정해준다
 //프로바이더 생성
 Provider<Dog>(
      create: (context) => Dog(name: 'Sun', breed: 'Bulldog', age: 3),
  
//하위 위젯에서 프로바이더 사용할때
변수 사용
'- name: ${Provider.of<Dog>(context).name}',
함수 사용
onPressed: () => Provider.of<Dog>(context, listen: false).grow(),


==============================================================
Provider
Provider extension methods
1.provider.of<T>(context,listen:false) 
   -> 이렇게 바꿔질수있음 : context.read<T>() -> T
   -> onPressed: () => context.read<Dog>().grow(),
2.provider.of<T>(context) 
   -> 이렇게 바꿔질수있음 : context.watch<T>() -> T
   ->'- name: ${context.watch<Dog>().name}',
3.객체에서 특정 변수만 모니터링할때 
   -> context.select<T, R>(R selector(T value)) -> R)
   -> context.select<Dog, String>((Dog dog) => dog.name)
   
==============================================================
Provider MultiProvider

아래 기본
ChangeNotifierProvider<T>(
create: (context) => T(),
child: ChangeNotifierProvider<S>(
create: (context) => S(),
child: ChangeNotifierProvider<R>(
create: (context) => R(),
child: WidgetA(),
),
),
)
!!!!!!!!! 멀티프로바이더 적용~~~
MultiProvider(
providers: [
ChangeNotifierProvider<T>(
create: (context) => T(),
),
ChangeNotifierProvider<S>(
create: (context) => S(),
),
ChangeNotifierProvider<R>(
create: (context) => R(),
),
],
child: WidgetA(),
),

==============================================================
Anonymouse route access Provider (라우트에 프로바이더 추가해서 넘겨주는것)
 onPressed: () {
Navigator.push(
  context,
  MaterialPageRoute(builder: (_) {
return ChangeNotifierProvider.value(
value: context.read<Counter>(),
child: const ShowMeCounter());
  }),
);
  },
 


==============================================================
ProxyProvider
어떤프로바이더가 다른 프로바이더의 값에 의존적이라면 프록시 프로바이더를 써야한다
프록시프라이더의 create 는 옵셔널이고 update required 이다. 

==============================================================
addPostFrameCallback
현재 프레임이 완성된후 등록된 콜백을 실행해라
UI에 영향을 미치는 액션의 실행을 현재의 프레임 이후에 실행해라
initState에서 setState...오류 생길시 참조
@override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      context.read<Counter>().increment();
      myCounter = context.read<Counter>().counter + 10;
    });
  }
==============================================================
다트 getter 샘플

enum AppState{ initial, loading, success, error,}  // 이넘

class Appprovider with ChangeNotifier{
 AppState _state = AppState.initial;
 AppState get state => _state;  // 게터
 notifyListeners();  // 리스너들에게 변경이되었다고 알려줌
}

//리스너 사용법 예제
context.read<클래스>().함수();  // changeNotifier를 믹스인한 클래스의 함수가 실행됨
final appState = context.watch<Appprovider>().state; // state값이 변경될때마다 appstate에 저장
==============================================================

플러터 SDK 오류 발생시

You can try the following suggestion to make the pubspec resolve:
* Try using the Flutter SDK version: 3.19.5.

flutter upgrade --force  콘솔에서 해당 명령어를 입력해준다

 

 

 

 

 

반응형