OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
4c00d7fa 1 parent 9ec22e63

修改发布按钮动画效果

Expand all
Inline Side-by-side
Showing 14 changed files with 743 additions and 46 deletions
......@@ -180,7 +180,7 @@ class HomeState extends State<Home> with WidgetsBindingObserver {
),
),
Positioned(
top: 18.0,
top: 30.0,
left: 10.0,
right: 10.0,
child: Center(
......
import 'dart:io';
import 'package:Parlando/account/view_models/account_view_model.dart';
import 'package:Parlando/membership/view_models/membership_view_model.dart';
import 'package:dio/dio.dart';
......@@ -23,6 +25,7 @@ import 'util/device_utils.dart';
import 'util/handle_error_utils.dart';
import 'util/log_utils.dart';
import 'util/theme_utils.dart';
///
/// 配置本地化的方法
/// 1. 安裝Flutter intl插件
......@@ -69,6 +72,16 @@ Future<void> main() async {
overlays: [SystemUiOverlay.bottom]);
// TODO(weilu): 启动体验不佳。状态栏、导航栏在冷启动开始的一瞬间为黑色，且无法通过隐藏、修改颜色等方式进行处理。。。
// 相关问题跟踪：https://github.com/flutter/flutter/issues/73351
if (Platform.isAndroid) {
//设置Android头部的导航栏透明
SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(
statusBarColor: Colors.transparent, //全局设置透明
statusBarIconBrightness: Brightness.light
//light:黑色图标 dark：白色图标
//在此处设置statusBarIconBrightness为全局设置
);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
class MyApp extends StatelessWidget {
......@@ -143,13 +156,14 @@ class MyApp extends StatelessWidget {
return OKToast(
backgroundColor: Colors.black54,
textPadding:
const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
radius: 20.0,
position: ToastPosition.bottom,
child: app);
}
Widget _buildMaterialApp(ThemeProvider provider, LocaleProvider localeProvider) {
Widget _buildMaterialApp(
ThemeProvider provider, LocaleProvider localeProvider) {
return MaterialApp(
title: '一言',
// showPerformanceOverlay: true, //显示性能标签
......
import 'package:Parlando/account/page/account_page.dart';
import 'package:Parlando/home/home_page.dart';
import 'package:Parlando/poem/theme/tik_theme.dart';
import 'package:animated_radial_menu/animated_radial_menu.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/Parlando_localizations.dart';
import 'package:provider/provider.dart';
......@@ -38,11 +36,12 @@ class NavBarPageState extends State<NavBarPage> {
'UserProfile': const AccountPage(),
};
return Scaffold(
extendBody: true, // 底部nav bar透明
body: tabs[_currentPage],
bottomNavigationBar: Consumer(
builder: (_, provider, __) {
return BottomAppBar(
color: Colors.grey,
color: Colors.transparent,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
......@@ -60,7 +59,7 @@ class NavBarPageState extends State<NavBarPage> {
.onePoemBottomNavigationBarItemTitle,
style: const TextStyle(
color: Colors.white54,
fontSize: 20.0,
fontSize: 16.0,
),
),
),
......@@ -81,7 +80,7 @@ class NavBarPageState extends State<NavBarPage> {
.profileBottomNavigationBarItemTitle,
style: const TextStyle(
color: Colors.white54,
fontSize: 20.0,
fontSize: 16.0,
),
),
),
......@@ -90,26 +89,6 @@ class NavBarPageState extends State<NavBarPage> {
);
},
),
floatingActionButton: SizedBox(
height: 60,
child: RadialMenu(
children: [
RadialButton(
icon: const Icon(Icons.video_call_outlined),
buttonColor: Colors.teal,
onPress: () {
eventBus.fire(TransEvent());
}),
RadialButton(
icon: const Icon(Icons.mic_none_outlined),
buttonColor: Colors.green,
onPress: () {
eventBus.fire(TransEvent());
}),
],
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
......
import 'package:Parlando/poem/poem_router.dart';
import 'package:Parlando/routers/fluro_navigator.dart';
import 'package:animated_radial_menu/animated_radial_menu.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:getwidget/getwidget.dart';
......@@ -38,11 +41,25 @@ class VideoSlidesState extends State<VideoSlides> {
super.initState();
isPraise = widget.isPraise;
isCollect = widget.isCollect;
recodeVideoPlayStatus();
}
Future<void> recodeVideoPlayStatus() async {
String url = '${HttpApi.addView}/${widget.videoId}';
// 统计观看数
DioUtils.instance.asyncRequestNetwork(
Method.get,
url,
params: [],
onSuccess: (data) {},
onError: (code, msg) {},
);
}
@override
Widget build(BuildContext context) {
return Stack(
alignment: AlignmentDirectional.center,
children: [
Container(
width: double.infinity,
......@@ -93,7 +110,7 @@ class VideoSlidesState extends State<VideoSlides> {
children: [
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(0, 10, 0, 0),
const EdgeInsetsDirectional.fromSTEB(0, 10, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
......@@ -108,7 +125,7 @@ class VideoSlidesState extends State<VideoSlides> {
child: InkWell(
onTap: () {
isPraise =
isPraise == false ? true : false;
isPraise == false ? true : false;
setState(() {});
String url =
'${HttpApi.praise}/${widget.videoId}';
......@@ -144,7 +161,7 @@ class VideoSlidesState extends State<VideoSlides> {
),
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(0, 10, 0, 0),
const EdgeInsetsDirectional.fromSTEB(0, 10, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
......@@ -159,7 +176,7 @@ class VideoSlidesState extends State<VideoSlides> {
child: InkWell(
onTap: () async {
isCollect =
isCollect == false ? true : false;
isCollect == false ? true : false;
setState(() {});
String url =
'${HttpApi.collect}/${widget.videoId}';
......@@ -195,7 +212,7 @@ class VideoSlidesState extends State<VideoSlides> {
),
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(0, 10, 0, 0),
const EdgeInsetsDirectional.fromSTEB(0, 10, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
......@@ -225,14 +242,14 @@ class VideoSlidesState extends State<VideoSlides> {
),
child: isSharing
? GFProgressBar(
percentage: currentProgress,
backgroundColor: Colors.black26,
progressBarColor: GFColors.DANGER)
percentage: currentProgress,
backgroundColor: Colors.black26,
progressBarColor: GFColors.DANGER)
: const Icon(
Icons.share_rounded,
color: Colors.white,
size: 20,
),
Icons.share_rounded,
color: Colors.white,
size: 20,
),
),
),
),
......@@ -248,6 +265,39 @@ class VideoSlidesState extends State<VideoSlides> {
),
],
),
Positioned(
bottom: -48,
child: Container(
alignment: Alignment.bottomCenter,
width: 160,
height: 180,
child: RadialMenu(
centerButtonAlignment: Alignment.bottomLeft,
children: [
RadialButton(
icon: const Icon(Icons.video_call_outlined),
buttonColor: Colors.teal,
onPress: () {
String url =
'${PoemRouter.poemRecordVideoPage}?id=${widget.videoId}&type=${widget.poemType}';
NavigatorUtils.push(
context,
url,
);
}),
RadialButton(
icon: const Icon(Icons.mic_none_outlined),
buttonColor: Colors.green,
onPress: () {
NavigatorUtils.push(
context,
'${PoemRouter.poemRecordAudioPage}?id=${widget.videoId}&type=${widget.poemType}',
);
}),
],
),
),
),
],
);
}
......@@ -269,10 +319,10 @@ class VideoSlidesState extends State<VideoSlides> {
tempVideoPath = "$savePath$appName";
Response response = await dio.download(url, tempVideoPath,
onReceiveProgress: (received, total) {
if (total != -1) {
currentProgress = received / total;
setState(() {});
}
});
if (total != -1) {
currentProgress = received / total;
setState(() {});
}
});
}
}
......
# Miscellaneous
*.class
*.log
*.pyc
*.swp
.DS_Store
.atom/
.buildlog/
.history
.svn/
# IntelliJ related
*.iml
*.ipr
*.iws
.idea/
# The .vscode folder contains launch configuration and tasks you configure in
# VS Code which you may wish to be included in version control, so this line
# is commented out by default.
#.vscode/
# Flutter/Dart/Pub related
**/doc/api/
.dart_tool/
.flutter-plugins
.flutter-plugins-dependencies
.packages
.pub-cache/
.pub/
build/
# Android related
**/android/**/gradle-wrapper.jar
**/android/.gradle
**/android/captures/
**/android/gradlew
**/android/gradlew.bat
**/android/local.properties
**/android/**/GeneratedPluginRegistrant.java
# iOS/XCode related
**/ios/**/*.mode1v3
**/ios/**/*.mode2v3
**/ios/**/*.moved-aside
**/ios/**/*.pbxuser
**/ios/**/*.perspectivev3
**/ios/**/*sync/
**/ios/**/.sconsign.dblite
**/ios/**/.tags*
**/ios/**/.vagrant/
**/ios/**/DerivedData/
**/ios/**/Icon?
**/ios/**/Pods/
**/ios/**/.symlinks/
**/ios/**/profile
**/ios/**/xcuserdata
**/ios/.generated/
**/ios/Flutter/App.framework
**/ios/Flutter/Flutter.framework
**/ios/Flutter/Flutter.podspec
**/ios/Flutter/Generated.xcconfig
**/ios/Flutter/ephemeral
**/ios/Flutter/app.flx
**/ios/Flutter/app.zip
**/ios/Flutter/flutter_assets/
**/ios/Flutter/flutter_export_environment.sh
**/ios/ServiceDefinitions.json
**/ios/Runner/GeneratedPluginRegistrant.*
# Exceptions to above rules.
!**/ios/**/default.mode1v3
!**/ios/**/default.mode2v3
!**/ios/**/default.pbxuser
!**/ios/**/default.perspectivev3
# This file tracks properties of this Flutter project.
# Used by Flutter tool to assess capabilities and perform upgrades etc.
#
# This file should be version controlled and should not be manually edited.
version:
revision: d79295af24c3ed621c33713ecda14ad196fd9c31
channel: stable
project_type: package
## 0.0.1 -
* initial release with sound null safety.
MIT License
Copyright (c) 2021 Sony Kurian
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
# animated_radial_menu
The package provides an easy way to work with radial menu along with animations.
![example](https://user-images.githubusercontent.com/67534990/124471528-98137680-ddba-11eb-91dc-c5d91053b3ed.gif)
You can check out the
example [here](https://github.com/sonykurian96/animated-radial-menu/blob/master/example/lib/main.dart)
## Installation
To use this package : add the dependency to your pubspec.yaml file
```yaml
dependencies:
flutter:
sdk: flutter
animated_radial_menu:
```
## Basic Usage
Import it to your project file
```dart
import 'package:animated_radial_menu/animated_radial_menu.dart';
```
Similar to column or row widget, simply pass in buttons as children and you are done
```dart
RadialMenu
(
children: [
RadialButton
(
icon: Icon
(
Icons.ac_unit),
onPress: (
)
=>
print
("ac unit
"
)
,
)
]
)
,
```
Eventhough you can use this widget anywhere, it's recommended to use RadialMenu with Stack Widget if
your page contains tons of UI elements
```dart
body: Stack
(
children: [
RadialMenu
(
children: [
RadialButton
(
icon: Icon
(
Icons.ac_unit),
buttonColor: Colors.teal,onPress: (
)
=>
Get.to(TargetScreen
(
)))
,
RadialButton
(
icon: Icon
(
Icons.camera_alt),
buttonColor: Colors.green,onPress: (
)
=>
Get.to(TargetScreen
(
)))
,
RadialButton
(
icon: Icon
(
Icons.map),
buttonColor: Colors.orange,onPress: (
)
=>
Get.to(TargetScreen
(
))),
/* you can add any number of buttons, although it's
not recommended to insert beyond 8-9 buttons. */
],
),
// rest of the widgets....
],
),
```
You can manually position the widget wherever you wish
```dart
RadialMenu
(
centerButtonAlignment: Alignment
(0.3,
0.5
) // by default alignment is set to Alignment.center
)
```
You can also customize the main centered button(more customizations will be made available soon)
```dart
RadialMenu
(
centerButtonSize: 0.5
, // size ranging from 0.0 to 1.0
)
```
library animated_radial_menu;
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'dart:math';
import 'package:vector_math/vector_math.dart' show radians;
class RadialMenu extends StatefulWidget {
// will take in list of buttons
final List<RadialButton> children;
// used for positioning the widget
final AlignmentGeometry centerButtonAlignment;
// set main button size
final double centerButtonSize;
// constructor for main button
const RadialMenu(
{Key? key,
required this.children,
this.centerButtonSize = 0.5,
this.centerButtonAlignment = Alignment.center})
: super(key: key);
@override
createState() => _RadialMenuState();
}
class _RadialMenuState extends State<RadialMenu>
with SingleTickerProviderStateMixin {
// used to control animations
AnimationController? controller;
// controller gets initialized here
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 900), vsync: this);
}
@override
Widget build(BuildContext context) {
return Align(
alignment: widget.centerButtonAlignment,
child: SizedBox(
width: 160,
height: 180,
child: RadialAnimation(
controller: controller!,
radialButtons: widget.children,
centerSizeOfButton: widget.centerButtonSize,
),
),
);
}
// controller gets disposed here
@override
void dispose() {
controller!.dispose();
super.dispose();
}
}
// Here all the animation will take place
class RadialAnimation extends StatelessWidget {
RadialAnimation(
{Key? key,
required this.controller,
required this.radialButtons,
this.centerSizeOfButton = 0.5})
:
// translation animation
translation = Tween<double>(
begin: 0.0,
end: 70.0,
).animate(
CurvedAnimation(parent: controller, curve: Curves.elasticOut),
),
// scaling animation
scale = Tween<double>(
begin: centerSizeOfButton * 2,
end: 0.0,
).animate(
CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn),
),
// rotation animation
rotation = Tween<double>(
begin: 0.0,
end: 315.0,
).animate(
CurvedAnimation(
parent: controller,
curve: const Interval(
0.0,
0.3,
curve: Curves.decelerate,
),
),
),
super(key: key);
final AnimationController controller;
final Animation<double> rotation;
final Animation<double> translation;
final Animation<double> scale;
final List<RadialButton> radialButtons;
final double centerSizeOfButton;
@override
Widget build(BuildContext context) {
// will provide angle for further calculation
double generatedAngle = 270;
double iconAngle;
return AnimatedBuilder(
animation: controller,
builder: (context, widget) {
return Transform.rotate(
angle: radians(rotation.value),
child: Stack(alignment: Alignment.center, children: [
// generates list of buttons
...radialButtons.map((index) {
iconAngle = radialButtons.indexOf(index) * generatedAngle;
return _buildButton(iconAngle,
color: index.buttonColor,
icon: index.icon,
onPress: index.onPress);
}),
// secondary button animation
Transform.scale(
scale: scale.value - (centerSizeOfButton * 2 - 0.25),
child: FloatingActionButton(
onPressed: close,
backgroundColor: Colors.red,
child: const Icon(FontAwesomeIcons.plus)),
),
// primary button animation
Transform.scale(
scale: scale.value,
child: FloatingActionButton(
onPressed: open,
backgroundColor: Colors.white,
child: const Icon(
FontAwesomeIcons.plus,
color: Colors.black54,
),
),
)
]));
});
}
// will show child buttons
void open() {
controller.forward();
}
// will hide child buttons
void close() {
controller.reverse();
}
// build custom child buttons
Widget _buildButton(double angle,
{Function? onPress, Color? color, Icon? icon}) {
final double rad = radians(angle);
return Transform(
transform: Matrix4.identity()
..translate(
(translation.value) * cos(rad), (translation.value) * sin(rad)),
child: FloatingActionButton(
backgroundColor: color,
onPressed: () {
onPress!();
close();
},
elevation: 0,
child: icon));
}
}
class RadialButton {
// background colour of the button surrounding the icon
final Color buttonColor;
// sets icon of the child buttons
final Icon icon;
// onPress function of the child buttons
final Function onPress;
// constructor for child buttons
RadialButton(
{this.buttonColor = Colors.orange,
required this.icon,
required this.onPress});
}
# Generated by pub
# See https://dart.dev/tools/pub/glossary#lockfile
packages:
async:
dependency: transitive
description:
name: async
url: "https://pub.dartlang.org"
source: hosted
version: "2.6.1"
boolean_selector:
dependency: transitive
description:
name: boolean_selector
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
characters:
dependency: transitive
description:
name: characters
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
clock:
dependency: transitive
description:
name: clock
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.dartlang.org"
source: hosted
version: "1.15.0"
fake_async:
dependency: transitive
description:
name: fake_async
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
flutter:
dependency: "direct main"
description: flutter
source: sdk
version: "0.0.0"
flutter_test:
dependency: "direct dev"
description: flutter
source: sdk
version: "0.0.0"
font_awesome_flutter:
dependency: "direct main"
description:
name: font_awesome_flutter
url: "https://pub.dartlang.org"
source: hosted
version: "9.1.0"
matcher:
dependency: transitive
description:
name: matcher
url: "https://pub.dartlang.org"
source: hosted
version: "0.12.10"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0"
path:
dependency: transitive
description:
name: path
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0"
sky_engine:
dependency: transitive
description: flutter
source: sdk
version: "0.0.99"
source_span:
dependency: transitive
description:
name: source_span
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.1"
stack_trace:
dependency: transitive
description:
name: stack_trace
url: "https://pub.dartlang.org"
source: hosted
version: "1.10.0"
stream_channel:
dependency: transitive
description:
name: stream_channel
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
string_scanner:
dependency: transitive
description:
name: string_scanner
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
term_glyph:
dependency: transitive
description:
name: term_glyph
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
test_api:
dependency: transitive
description:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
version: "0.3.0"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0"
vector_math:
dependency: "direct main"
description:
name: vector_math
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
sdks:
dart: ">=2.12.0 <3.0.0"
flutter: ">=1.17.0"
name: animated_radial_menu
description: highly customizable complex radial animation without any boilerplate code.
version: 0.0.1
homepage: https://github.com/sonykurian96/animated-radial-menu
environment:
sdk: ">=2.12.0 <3.0.0"
flutter: ">=1.17.0"
dependencies:
flutter:
sdk: flutter
font_awesome_flutter: ^9.1.0
vector_math: ^2.1.0
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# To add assets to your package, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
#
# For details regarding assets in packages, see
# https://flutter.dev/assets-and-images/#from-packages
#
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# To add custom fonts to your package, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts in packages, see
# https://flutter.dev/custom-fonts/#from-packages
This diff is collapsed. Click to expand it.
......@@ -116,7 +116,9 @@ dependencies:
event_bus: ^2.0.0
animated_radial_menu: ^0.0.1
animated_radial_menu:
path: plugins/animated_radial
flutter_inapp_purchase: ^5.3.0
jpush_flutter: ^2.2.9
......