기본 영웅 애니메이션
Flutter의 Hero라는 단어가 궁금하여 클릭하면 사진이 확대/축소되는 매우 기본적이면서도 만족스러운 앱을 구현하기로 결정했습니다.
Hero의 경우 별도의 종속성을 얻을 필요가 없습니다.
Get to the point!
Flutter에 익숙하다고 가정하고 시작하겠습니다!
새로운 Flutter 프로젝트 생성
당신이 옳다고 생각하는 모든 이름을 자유롭게 지정하십시오. 나는 이름을 지었습니다 hero_animation . Flutter가 제공하는 데모 앱에서 main.dart 파일을 열고 build 메서드에서 본문을 지우면 다음과 같습니다.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(children: <Widget>[]));
}
}
Hero 애니메이션을 더 잘 시각화하기 위해 열 위젯의 MainAxisAlignment.end 속성을 사용하여 화면 왼쪽 하단에 애니메이션할 이미지를 배치하기로 했습니다.
영웅 효과를 추가하기 전에 여기에서 카드 안의 이미지와 텍스트만으로 앱의 기본 모양을 만드는 것이 좋습니다.
또한 투명한 이미지를 사용했을 때 효과가 시각적으로 너무 매력적이라는 것을 알았습니다.
내 앱의 루트 디렉터리에 만든 자산 폴더에 a transparent image을 dashatars.png로 다운로드했습니다. pubspec.yaml 에 이미지를 추가하는 것을 잊지 마십시오.
flutter:
assets:
- assets/
카드 위젯 만들기
내 카드에는 이미지와 텍스트가 있으므로 열 위젯을 자식으로 사용했습니다. 또한 기본 스타일보다 더 잘 보이도록 필요한 패딩을 추가했습니다.
Card(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
"assets/dashatars.png",
height: 100,
),
),
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
"Meet Dash!",
style: TextStyle(color: Colors.blue, fontSize: 20),
))]))
Image.network(url) 대신 Image.asset(path) 를 사용할 수도 있습니다.
내 단계를 따르면 이 화면이 표시됩니다 👇
이 이미지는 지금 클릭할 수 없습니다. GestureDetector로 카드를 감싸고 카드를 탭할 때 다음 페이지로 이동하도록 합시다.
The wrapping can be easily done by 'Wrap widget with...' option in Ctrl + . in Visual Studio Code, or by clicking the small yellow bulb that pops up in the left.
GestureDetector(
child: Card(...),
onTap: () {
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: const Duration(milliseconds: 2000),
pageBuilder: (_, __, ___) => const SecondPage()));
},
)
이제 카드가 클릭을 수신해야 합니다.
MaterialPageRoute를 쉽게 사용할 수 있지만 더 멋지고 눈에 잘 띄는 애니메이션을 제공하는 transitionDuration 속성이 있기 때문에 PageRouteBuilder를 선택했습니다.
이 시점에서 SecondPage()가 존재하지 않는다는 오류가 발생합니다. 수정하자!
두 번째 페이지 만들기
lib/ 디렉터리 안에 새 파일 second_pg.dart 을 만듭니다. 상태 비저장 위젯을 만듭니다SecondPage.
Typing stless in VSCode would create all the boilerplate code and you will just have to type in the class name.
이제 여기에서 Dash의 더 큰 이미지를 보여주고 간단한 설명을 작성합니다.
컨테이너를 제거하고 기본 AppBar와 본문이 있는 Scaffold로 만듭니다.
본문에는 Dash 이미지와 설명이라는 두 개의 자식이 있는 Center 위젯으로 래핑된 열이 있습니다.
이미지의 성장이 명확하도록 이미지의 높이를 300으로 설정했습니다. 텍스트 설명은 잘 보이도록 Expanded 위젯을 사용했습니다.
코드가 설명으로 혼잡하지 않도록 하려면 빌드 메소드의 return 문 앞에 필드const description = "This is Dash, a chubby hummingbird, the mascot of Flutter and Dart.\n\nDash was originally a Dart mascot, not a Flutter mascot.\n\nEarly on, a hummingbird image was used to represent Dart. The hummingbird represents that Dart is a speedy language.\n\nMega-Dash, a life-sized mascot is currently resting in a locked-down Google office."를 생성합니다.
body: Center(
child: Column(
children: [
Image.asset(
"assets/dashatars.png",
height: 300,
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.blue.shade100,
borderRadius: const BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30))),
child: Text(description,
style: TextStyle(fontSize: 16),
),),)],),)
앱 실행은 다음과 같아야 합니다. 애니메이션 없이 화면만 바뀝니다.
기본 UI가 완성되었으니 이미지를 영웅으로 만들어 봅시다.
Dash가 영웅처럼 날게 하세요
Head to main.dart , wrap the GestureDetector with a Hero() widget. This will tell you that a parameter tag is required. Set the tag as "dash" . This tag helps Flutter recognise a Hero in both pages so that the animation can be done.
The code now looks like this:
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Hero(
tag: "dash",
child: GestureDetector(...))])
Now, head to second_pg.dart and tell Flutter that the small image in the first screen should be grown to the image shown in second screen. Use the same tag "dash" here too.
Center(
child: Column(
children: [
Hero(
tag: "dash",
child: Image.asset(
"assets/dashatars.png",
height: 300,
),
),]))
Now run the app, you can see the small image gracefully growing when the screen changes. 🦸♀️
무언가를 화면 안팎으로 날게 만드는 것이 기본 지루한 페이지 전환보다 훨씬 낫습니다. 고급 형태의 영웅 애니메이션은 페이지 전환을 다음 단계로 끌어올려 최소한의 노력으로 앱에 활력을 불어넣습니다.
Reference
이 문제에 관하여(기본 영웅 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/lakshmiwarrier/basic-hero-animation-40
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(children: <Widget>[]));
}
}
flutter:
assets:
- assets/
내 카드에는 이미지와 텍스트가 있으므로 열 위젯을 자식으로 사용했습니다. 또한 기본 스타일보다 더 잘 보이도록 필요한 패딩을 추가했습니다.
Card(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
"assets/dashatars.png",
height: 100,
),
),
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
"Meet Dash!",
style: TextStyle(color: Colors.blue, fontSize: 20),
))]))
Image.network(url) 대신 Image.asset(path) 를 사용할 수도 있습니다.내 단계를 따르면 이 화면이 표시됩니다 👇
이 이미지는 지금 클릭할 수 없습니다. GestureDetector로 카드를 감싸고 카드를 탭할 때 다음 페이지로 이동하도록 합시다.
The wrapping can be easily done by 'Wrap widget with...' option in Ctrl + . in Visual Studio Code, or by clicking the small yellow bulb that pops up in the left.
GestureDetector(
child: Card(...),
onTap: () {
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: const Duration(milliseconds: 2000),
pageBuilder: (_, __, ___) => const SecondPage()));
},
)
이제 카드가 클릭을 수신해야 합니다.
MaterialPageRoute를 쉽게 사용할 수 있지만 더 멋지고 눈에 잘 띄는 애니메이션을 제공하는
transitionDuration 속성이 있기 때문에 PageRouteBuilder를 선택했습니다.이 시점에서 SecondPage()가 존재하지 않는다는 오류가 발생합니다. 수정하자!
두 번째 페이지 만들기
lib/ 디렉터리 안에 새 파일 second_pg.dart 을 만듭니다. 상태 비저장 위젯을 만듭니다SecondPage.
Typing stless in VSCode would create all the boilerplate code and you will just have to type in the class name.
이제 여기에서 Dash의 더 큰 이미지를 보여주고 간단한 설명을 작성합니다.
컨테이너를 제거하고 기본 AppBar와 본문이 있는 Scaffold로 만듭니다.
본문에는 Dash 이미지와 설명이라는 두 개의 자식이 있는 Center 위젯으로 래핑된 열이 있습니다.
이미지의 성장이 명확하도록 이미지의 높이를 300으로 설정했습니다. 텍스트 설명은 잘 보이도록 Expanded 위젯을 사용했습니다.
코드가 설명으로 혼잡하지 않도록 하려면 빌드 메소드의 return 문 앞에 필드const description = "This is Dash, a chubby hummingbird, the mascot of Flutter and Dart.\n\nDash was originally a Dart mascot, not a Flutter mascot.\n\nEarly on, a hummingbird image was used to represent Dart. The hummingbird represents that Dart is a speedy language.\n\nMega-Dash, a life-sized mascot is currently resting in a locked-down Google office."를 생성합니다.
body: Center(
child: Column(
children: [
Image.asset(
"assets/dashatars.png",
height: 300,
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.blue.shade100,
borderRadius: const BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30))),
child: Text(description,
style: TextStyle(fontSize: 16),
),),)],),)
앱 실행은 다음과 같아야 합니다. 애니메이션 없이 화면만 바뀝니다.
기본 UI가 완성되었으니 이미지를 영웅으로 만들어 봅시다.
Dash가 영웅처럼 날게 하세요
Head to main.dart , wrap the GestureDetector with a Hero() widget. This will tell you that a parameter tag is required. Set the tag as "dash" . This tag helps Flutter recognise a Hero in both pages so that the animation can be done.
The code now looks like this:
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Hero(
tag: "dash",
child: GestureDetector(...))])
Now, head to second_pg.dart and tell Flutter that the small image in the first screen should be grown to the image shown in second screen. Use the same tag "dash" here too.
Center(
child: Column(
children: [
Hero(
tag: "dash",
child: Image.asset(
"assets/dashatars.png",
height: 300,
),
),]))
Now run the app, you can see the small image gracefully growing when the screen changes. 🦸♀️
무언가를 화면 안팎으로 날게 만드는 것이 기본 지루한 페이지 전환보다 훨씬 낫습니다. 고급 형태의 영웅 애니메이션은 페이지 전환을 다음 단계로 끌어올려 최소한의 노력으로 앱에 활력을 불어넣습니다.
Reference
이 문제에 관하여(기본 영웅 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/lakshmiwarrier/basic-hero-animation-40
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Typing stless in VSCode would create all the boilerplate code and you will just have to type in the class name.
body: Center(
child: Column(
children: [
Image.asset(
"assets/dashatars.png",
height: 300,
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.blue.shade100,
borderRadius: const BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30))),
child: Text(description,
style: TextStyle(fontSize: 16),
),),)],),)
Head to main.dart , wrap the GestureDetector with a Hero() widget. This will tell you that a parameter tag is required. Set the tag as "dash" . This tag helps Flutter recognise a Hero in both pages so that the animation can be done.
The code now looks like this:
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Hero(
tag: "dash",
child: GestureDetector(...))])
Now, head to second_pg.dart and tell Flutter that the small image in the first screen should be grown to the image shown in second screen. Use the same tag "dash" here too.
Center(
child: Column(
children: [
Hero(
tag: "dash",
child: Image.asset(
"assets/dashatars.png",
height: 300,
),
),]))
무언가를 화면 안팎으로 날게 만드는 것이 기본 지루한 페이지 전환보다 훨씬 낫습니다. 고급 형태의 영웅 애니메이션은 페이지 전환을 다음 단계로 끌어올려 최소한의 노력으로 앱에 활력을 불어넣습니다.
Reference
이 문제에 관하여(기본 영웅 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lakshmiwarrier/basic-hero-animation-40텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
