Skip to content

Commit

Permalink
tmp
Browse files Browse the repository at this point in the history
  • Loading branch information
@lllttt06
lllttt06 committed Mar 13, 2024
1 parent 649e1da commit 5ec7604
Show file tree
Hide file tree
Showing 12 changed files with 345 additions and 135 deletions.
3 changes: 1 addition & 2 deletions packages/app/lib/ui/screen/slide/component/custom_slide_builder.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import 'package:auto_size_text/auto_size_text.dart';
import 'package:ca_flutter_slide/foundation/build_context_exe.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';

Widget Function(BuildContext) customSlideBuilder({
required String title,
Expand All @@ -26,7 +25,7 @@ Widget Function(BuildContext) customSlideBuilder({
),
),
),
Gap(context.slideSize.height * 0.05),
// Gap(context.slideSize.height * 0.02),
Expanded(
child: Align(
alignment: alignment,
Expand Down
38 changes: 38 additions & 0 deletions packages/app/lib/ui/screen/slide/component/link_text.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import 'package:ca_flutter_slide/foundation/build_context_exe.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/custom_slide_builder.dart';
import 'package:flutter/material.dart';
import 'package:universal_html/html.dart';

class LinkText extends StatelessWidget {
const LinkText({
required this.text,
required this.url,
required this.textAreaHeight,
this.style,
this.alignment = Alignment.center,
super.key,
});

final String text;
final String url;
final double textAreaHeight;
final AlignmentGeometry alignment;
final TextStyle? style;

@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
window.open(url, '');
},
child: AutoResizedText(
text,
textAreaHeight: textAreaHeight,
style: (style ?? context.text.bodyLarge)!.copyWith(
color: Colors.blue,
),
alignment: alignment,
),
);
}
}
0 .../lib/ui/screen/slide/component/empty.dart → ...ui/screen/slide/component/rive/empty.dart
View file
File renamed without changes.
12 changes: 4 additions & 8 deletions ...i/screen/slide/component/like_button.dart → ...een/slide/component/rive/like_button.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,32 +12,28 @@ class LikeButton extends HookWidget {
static const _stateMachineName = 'LikeStateMachine';

static const _inputPressed = 'Pressed';
static const _inputHover = 'Hover';

@override
Widget build(BuildContext context) {
final stateMachineController = useRef<StateMachineController?>(null);
final hover = useRef<SMIBool?>(null);
final pressed = useRef<SMIBool?>(null);

return SizedBox(
width: width,
height: height,
child: GestureDetector(
onTap: () {
pressed.value!.value = !pressed.value!.value;
},
onTap: () => pressed.value!.value = !pressed.value!.value,
child: Assets.rive.lightLike.rive(
onInit: (artboard) {
// artboard から StateMachineController を取得
stateMachineController.value = StateMachineController.fromArtboard(
artboard,
_stateMachineName,
);
// artboard に StateMachineController を紐付ける
artboard.addController(stateMachineController.value!);

hover.value ??= stateMachineController.value!
.findInput<bool>(_inputHover)! as SMIBool;
hover.value!.value = true;
// StateMachineController から SMIBool を取得
pressed.value ??= stateMachineController.value!
.findInput<bool>(_inputPressed)! as SMIBool;
},
Expand Down
0 ...lib/ui/screen/slide/component/rating.dart → ...i/screen/slide/component/rive/rating.dart
View file
File renamed without changes.
120 changes: 61 additions & 59 deletions packages/app/lib/ui/screen/slide/content/create_rive_animation.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import 'package:ca_flutter_slide/foundation/build_context_exe.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/empty.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/like_button.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/rating.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/custom_slide_builder.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/rive/empty.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/rive/like_button.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/rive/rating.dart';
import 'package:flutter/material.dart';
import 'package:flutter_deck/flutter_deck.dart';
import 'package:gap/gap.dart';
Expand All @@ -11,72 +12,73 @@ class CreateRiveAnimationSlide extends FlutterDeckSlideWidget {
: super(
configuration: const FlutterDeckSlideConfiguration(
route: '/create-rive-animation',
header: FlutterDeckHeaderConfiguration(
title: 'Rive アニメーション作成',
),
),
);

@override
FlutterDeckSlide build(BuildContext context) {
final demoWidth = context.slideSize.height * 0.4;
final textAreaHeight = context.slideSize.height * 0.05;

return FlutterDeckSlide.blank(
builder: (context) {
return Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Rive 公式の UseCase より引用',
style: context.text.displayMedium,
),
Gap(context.slideSize.height * 0.1),
Table(
children: [
TableRow(
children: [
TableCell(
child: Column(
children: [
Text(
'いいねボタン',
style: context.text.displayMedium,
),
LikeButton(width: demoWidth, height: demoWidth),
],
),
builder: customSlideBuilder(
title: 'Rive でアニメーション作成',
builder: (context) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AutoResizedText(
'いいねボタンをサンプル',
textAreaHeight: textAreaHeight * 2,
style: context.text.displayMedium,
),
Gap(context.slideSize.height * 0.1),
Table(
children: [
TableRow(
children: [
TableCell(
child: Column(
children: [
AutoResizedText(
'いいね',
textAreaHeight: textAreaHeight,
style: context.text.displayMedium,
),
LikeButton(width: demoWidth, height: demoWidth),
],
),
TableCell(
child: Column(
children: [
Text(
'レーティングボタン',
style: context.text.displayMedium,
),
Rating(width: demoWidth, height: demoWidth),
],
),
),
TableCell(
child: Column(
children: [
AutoResizedText(
'レーティング',
textAreaHeight: textAreaHeight,
style: context.text.displayMedium,
),
Rating(width: demoWidth, height: demoWidth),
],
),
TableCell(
child: Column(
children: [
Text(
'アニメーション',
style: context.text.displayMedium,
),
Empty(width: demoWidth, height: demoWidth),
],
),
),
TableCell(
child: Column(
children: [
AutoResizedText(
'Empty',
textAreaHeight: textAreaHeight,
style: context.text.displayMedium,
),
Empty(width: demoWidth, height: demoWidth),
],
),
],
),
],
),
],
),
);
},
),
],
),
],
),
],
),
),
);
}
}
14 changes: 11 additions & 3 deletions packages/app/lib/ui/screen/slide/content/interactive_animation_slide.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import 'package:ca_flutter_slide/foundation/build_context_exe.dart';
import 'package:ca_flutter_slide/gen/assets.gen.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/custom_slide_builder.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/like_button.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/link_text.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/rive/like_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_deck/flutter_deck.dart';
import 'package:gap/gap.dart';
Expand Down Expand Up @@ -89,13 +90,20 @@ class InteractiveAnimationSlide3 extends FlutterDeckSlideWidget {
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Assets.images.rivePipeline.image(
height: context.slideSize.height * 0.45,
height: context.slideSize.height * 0.42,
),
Assets.images.riveFileSize.image(
height: context.slideSize.height * 0.45,
height: context.slideSize.height * 0.42,
),
],
),
Gap(context.slideSize.height * 0.05),
LinkText(
text: 'Rive 公式の Rive vs Lottie より',
url: 'https://rive.app/blog/rive-as-a-lottie-alternative',
textAreaHeight: context.slideSize.height * 0.04,
style: context.text.displayMedium,
),
],
),
),
Expand Down
70 changes: 7 additions & 63 deletions packages/app/lib/ui/screen/slide/content/rive_flutter_sample_slide.dart
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import 'package:ca_flutter_slide/foundation/build_context_exe.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/custom_slide_builder.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/empty.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/like_button.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/rating.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/link_text.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/rive/empty.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/rive/like_button.dart';
import 'package:ca_flutter_slide/ui/screen/slide/component/rive/rating.dart';
import 'package:flutter/material.dart';
import 'package:flutter_deck/flutter_deck.dart';
import 'package:gap/gap.dart';
Expand All @@ -26,8 +27,9 @@ class RiveFlutterSampleSlide extends FlutterDeckSlideWidget {
builder: (context) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AutoResizedText(
'Rive 公式の UseCase より引用',
LinkText(
text: 'Rive 公式の UseCase より',
url: 'https://rive.app/use-cases',
textAreaHeight: textAreaHeight * 2,
style: context.text.displayMedium,
),
Expand Down Expand Up @@ -80,63 +82,5 @@ class RiveFlutterSampleSlide extends FlutterDeckSlideWidget {
),
),
);
return FlutterDeckSlide.blank(
builder: (context) {
return Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Rive 公式の UseCase より引用',
style: context.text.displayMedium,
),
Gap(context.slideSize.height * 0.1),
Table(
children: [
TableRow(
children: [
TableCell(
child: Column(
children: [
Text(
'いいねボタン',
style: context.text.displayMedium,
),
LikeButton(width: demoWidth, height: demoWidth),
],
),
),
TableCell(
child: Column(
children: [
Text(
'レーティングボタン',
style: context.text.displayMedium,
),
Rating(width: demoWidth, height: demoWidth),
],
),
),
TableCell(
child: Column(
children: [
Text(
'アニメーション',
style: context.text.displayMedium,
),
Empty(width: demoWidth, height: demoWidth),
],
),
),
],
),
],
),
],
),
);
},
);
}
}
Loading

0 comments on commit 5ec7604

Please sign in to comment.