首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让额外的widgets和MarkDown一起在Scaffold body中颤动?

要让额外的widgets和MarkDown一起在Scaffold body中颤动,可以使用Flutter中的动画效果来实现。以下是一个示例代码,展示了如何使用Flutter的动画库来实现这个效果:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shaking Widgets'),
        ),
        body: ShakeAnimation(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Hello, World!',
                style: TextStyle(fontSize: 24),
              ),
              SizedBox(height: 20),
              Text(
                'This is a Markdown text.',
                style: TextStyle(fontSize: 18),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ShakeAnimation extends StatefulWidget {
  final Widget child;

  ShakeAnimation({required this.child});

  @override
  _ShakeAnimationState createState() => _ShakeAnimationState();
}

class _ShakeAnimationState extends State<ShakeAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 500),
      vsync: this,
    );
    _animation = Tween<double>(begin: -10, end: 10).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
      ),
    )..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          _controller.forward();
        }
      });
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      child: widget.child,
      builder: (BuildContext context, Widget? child) {
        return Transform.translate(
          offset: Offset(_animation.value, 0),
          child: child,
        );
      },
    );
  }
}

在上述代码中,我们创建了一个ShakeAnimation小部件,它接受一个child小部件作为参数。ShakeAnimation小部件使用AnimationControllerAnimation来创建一个水平方向的抖动动画效果。在build方法中,我们使用AnimatedBuilder来构建动画,并通过Transform.translate将抖动效果应用于child小部件。

你可以将需要颤动的widgets和Markdown文本放置在ShakeAnimation小部件中,然后将ShakeAnimation小部件放置在Scaffold的body中,即可实现额外的widgets和Markdown一起在Scaffold body中颤动的效果。

请注意,这只是一个示例代码,你可以根据实际需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用 fl_chart 实现 Flutter 图表魔法🪄

我们将从简单事情开始,比如线性图表饼状图表,然后我们深入其他高级特性,使用图表探索炫酷事物。 为什么使用 fl_chart? fl_chart 就像一个魔法棒一样 Flutter 绘图。...它让我们创造各种炫酷类型图表,并以令人兴奋方式展示我们数据。 折线图表 Flutter 中线性/折线图表贯穿我们整个数据故事一次视觉之旅。它们将点关联起来,来展示数据如何变化或增长。...我们可以想象是我们数据冒险,非常适合展示趋势或者起伏。最好部分是什么?我们可以这些图表看起来很棒,并和我们应用风格相搭。 步骤一 添加下面的依赖到 pubspec.yaml 文件。... home_page.dart 文件,让我们创建三个按钮来演示我们案例。 routes.dart 文件,我们已经设定了导航到我们案例,你们可以查看源码来获取更详细内容。... lib 文件夹 views 下创建 first_line_chart.dart 文件。

31210

Flutter Dojo设计之道——如何打造一个通用Playground

Dojo设计之初,是为了能够演示Flutter,多如牛毛Widget,所以,一个通用Demo演示界面,就显得非常有必要了,一是可以节省很多通用代码,二是可以Demo演示,专注于Demo本身...return Scaffold( appBar: appbar, body: Container( color: Color(0xFFE6EBEB), padding: const...这里算是一个国际惯例,Flutter中一般采用kXXXX来表示常量 代码预览 官方Demo,Flutter Gallery,有类似的实现,这里实际上是借助Markdown解析,将代码展示出来...参考Gallery实现,我们需要借助两个开源库: flutter_markdown syntax_highlighter 一个用于渲染MD,一个用于将代码关键词进行高亮,具体使用,大家可以参考...分享 Dojo设计之初就考虑了代码开箱即用功能,所以分享功能,可以学习者快速将Dojo代码,Copy出来使用,所以这里使用了一个插件来实现分享功能, url_launcher 借助这个插件,

1.1K10
  • 给Android开发者Flutter上手指南

    ScrollViewFlutter中等价于什么? 谁是Flutter列表组件? 如何知道点击了列表哪个item? 如何动态更新ListView?...Flutter,有几种方法可以实现相同结果 您可以通过使用Column、RowStack组合来实现RelativeLayout效果。...您可以为widget构造函数指定相对于父组件布局规则。 推荐参考StackOverflow上一个Flutter构建RelativeLayout例子。 如何使用widget定义布局属性?...Flutter,布局主要由专门设计用于提供布局小部件定义,并结合控件widget及其样式属性。 例如, 列 widgets 控制一个数组条目 并且 分别垂直水平对齐它们。...例如, Padding, Align, Stack。 更多布局widget可参考 Layout Widgets。 ? ? 如何分层布局?

    2K20

    带你快速掌握Flutter视图(Widgets)

    在这篇文章,将向大家分享Flutter开发一些视图(Widgets)相关一些知识经验,主要包含: 谁是FlutterView? 如何更新Widgets? 如何布局?...如何在布局添加或删除组件? 如何对 Widget 做动画? 如何绘图(Canvas draw/paint)? 如何构建自定义Widgets? 如何设置Widget透明度?...那么,Flutter我们可以将Widget当做是Android、iOS、RNView,但他们并不完全等价,但当我们试图去理解 Flutter 是如何工作时候,我们可以认为它是“声明构建 UI...Flutter,您可以使用Widgets核心布局小部件 如 Container, Column, Row, Center,关于Widget更多内容可参考:Layout Widgets目录...如何更新Widgets? Android/iOS要更新视图,我们可以直接通过对应方法来操作更改。 Flutter,Widget是不可变,不会直接更新。

    11K10

    「快速上手Flutter开发系列教程」之线程异步UI

    怎么编写异步代码? Dart有一个单线程执行模型,支持Isolate(一种另一个线程上运行Dart代码方法),一个事件循环异步编程。...Flutter event loop iOS main loop 相似:Looper 是附加在主线程上。...如何进行网络请求? Flutter ,使用流行 http package 做网络请求非常简单。它把你可能需要自己做网络请求操作抽象了出来,发起请求变得简单。...= json.decode(response.body); }); } } 以上代码片段完整部分可以课程源码查找。...关于网络请求更多内容实战技巧可学习《基于Http实现网络操作》部分课程。 如何为长时间运行任务添加一个进度指示器?

    2.2K20

    flutter响应式布局

    flutter,我们可以根据UI设计效果,通过使用不同技术、widgets第三方包,轻松实现响应式 In this article, we'll focus on one very specific...,并介绍如何在大屏幕手机上使用如下布局方式: 大屏幕 手机屏幕使用drawer 就像我们看到不同屏幕尺寸,我们需要不同布局方式...web开发我们可以使用css很容易实现这种效果。下面我们就来看看在flutter如何实现吧! 我们将实现如下简单功能: 点击左上角icon打开(点击返回按钮关闭)....我们看看我们widget tree SplitView 添加了Scaffold但是没有 AppBar ....虽然FirstPage有 Scaffold AppBar 但是没有 Drawer. 先有鸡还是先有蛋呢?

    2.8K10

    Flutter 构建完整应用手册-处理手势

    处理点击 我们不仅希望向用户展示信息,还希望我们用户与我们应用进行互动! 那么,我们如何回应基本操作,如点击拖动? 我们将使用GestureDetector部件!...实现划动消除 “划动消除”模式很多移动应用很常见。 例如,如果我们正在编写一个电子邮件应用程序,我们可能希望允许我们用户列表划离邮件消息。...有关如何创建列表更多详细说明,请按照使用长列表配方进行操作。 创建一个数据源 我们例子,我们需要20个样品条目。 为了简单起见,我们将生成一个字符串列表。...用户将该项目删除后,我们需要运行一些代码以从列表删除该项目并显示Snackbar。 真实应用程序,您可能需要执行更复杂逻辑,例如从Web服务或数据库删除项目。...这是Dismissible部件发挥作用地方! 我们例子,我们将更新我们itemBuilder函数以返回一个Dismissible部件。

    1.8K20

    flutterkey作用

    翻译过来: 控制一个小部件如何替换树另一个小部件。...当找到新widget(其键类型与相同位置先前widget不匹配),但是在前一帧其他位置有一个具有相同全局键widget时,该widgetelement将移至新位置。...(0, widgets.removeAt(1)); setState(() {}); } } 有状态组件 有状态组件状态信息(如颜色)通常是存储state,而state是存储element...用途1 允许widget应用程序任何位置更改其parent而不丢失其状态。应用场景:两个不同屏幕上显示相同widget,并保持状态相同。...参考资料 何时使用密钥 - Flutter小部件 101 第四集 widgets-intro#keys Flutter | 深入浅出Key FlutterKeyGlobalKey

    1.6K10

    『Flutter』有无状态组件

    那么了解了这些背景内容之后,那么官方是如何解决这个问题呢?...Flutter,组件(Widgets)是构建用户界面的基本元素。组件分为两种类型:有状态组件(Stateful Widgets无状态组件(Stateless Widgets)。...通过我观察 MaterialApp home 属性是一个 Scaffold 组件,所以我们将 Scaffold 组件也抽离出来,然后 MaterialApp 引用。...内容是一个 Center 组件,所以我们将 Center 组件也抽离出来,然后 Scaffold 引用, 这里我就不浪费时间了因为本次还有一个有状态组件还要介绍无状态组件使用就到这里了。...这里需要强调无状态组件一个关键注意事项, 无状态组件,组件被创建之后会将组件变量变成 final ,所以无法管理状态。那么我们该如何解决这个问题呢?这里就需要用到有状态组件了。

    34140

    Flutter Hero动画开发实用教程

    在这篇文章,将向大家分享Flutter动画中重要一员Hero动画,以及一些Hero动画开发技巧经验。...大家Flutter开发环境过程遇到无法解决问题可以课程问答区进行提问,课程老师会对你进行辅导帮助; 精心设计动画会用户界面感觉更直观、流畅,能改善用户体验。...许多widget,特别是Material Design widgets, 都带有在其设计规范定义标准动画效果,但也可以自定义这些效果,开始学习之前呢,我们先来快速过一下本篇文章目录: 目录 什么是...如何实现标准Hero动画? Hero函数原型函数原型是什么? 如何实现径向Hero动画? 什么是Hero动画? Flutter可以用 Hero widget创建这个动画。...“飞行”过程如何变化; child:[必须]定义动画所呈现widget; 实现径向Hero动画 ...

    1.1K10

    flutter系列之:构建Widget上下文环境BuildContext详解

    没有对应build方法,但是StatefulWidget对应State也有同样build方法。...这个BuildContext被称为是Widget上下文构建环境。 那么BuildContext有什么特性呢?我们又该如何使用BuildContext呢?一起来看看吧。...BuildContext本质 还记得flutter三颗树吗? 他们分别是Widgets树,Element树Render树。其中WidgetsElement树是一一对应。...BuildContextInheritedWidget InheritedWidget是一种widget用来tree向下传递变动信息,tree子节点中,可以通过调用BuildContext.dependOnInheritedWidgetOfExactType...所以我们使用BuildContext时候,一定要注意。 总结 BuildContext是构建Widget基础,它也提供了一些非常有用查找绑定功能,希望能对大家有所帮助。

    1.1K10

    Flutter 绘制探索 1 | CustomPainter 正确刷新姿势 | 七日打卡

    本文就来分享一下这个非常重要知识点。 ? ---- 一、Flutter 自定义绘制方式 本文测试案例效果如下,使用 CustomPaint 组件绘制一个圆,其执行 3 秒红转蓝 动画。... paint 方法中会回调 Canvas Size 对象,以供绘制使用。如下代码,绘制一个颜色为 color 圆。...---- 三、CustomPainter Flutter 框架应用 其实 CustomPainter Flutter 框架源码应用并不是非常多,一共也就下面的 20 处。..._GlowingOverscrollIndicatorPainter 当时还有一个疑惑是,repaint 只是传入一个 Listenable 对象,那么多个属性如何去监听呢,比如多个动画同时执行。...对于非频繁刷新场景,局部刷新也就够了,这应该就是源码非 动画滑动 不使用 repaint 原因。但对于频繁触发绘制,如 动画 滑动 一定要用。

    1.5K20

    Flutter动画之自定义动画组件-FlutterLayout

    前言: 本文将自定义一个FlutterWidget动画组件,Flutter有颤动意思 在此之前会讲一下AnimatedWidget与AnimatedBuilder是什么,如何使用 所以本文是一篇挺重要文章...---- 2.组件之所为组件 2.1:组件是什么 模块化思想大家应该都听过,为了已有代码更好复用,将项目拆成不同模块 组件也是这样,对于一个页面,便是组件组合,可以拆装,拼凑和批量生成 代码我们可以很轻易将多个控件批量动效...build方法里生成刚才带有颤动效果组件 ?...= Scaffold( body: Center(child: show,) ); 另外还有我们FlutterLayout,可以包含任意组件,那Image来测试 ?...= Scaffold( body: Center(child: show,) ); 好了,到这也差不多了,你以为结束了,稍安勿躁,还有一点 ---- 3.增加运动曲线 可以用曲线补间来动画执行不那么古板

    1.9K20

    flutter系列之:构建Widget上下文环境BuildContext详解

    StatefulWidget没有对应build方法,但是StatefulWidget对应State也有同样build方法。...这个BuildContext被称为是Widget上下文构建环境。 那么BuildContext有什么特性呢?我们又该如何使用BuildContext呢?一起来看看吧。...BuildContext本质 还记得flutter三颗树吗? 他们分别是Widgets树,Element树Render树。其中WidgetsElement树是一一对应。...BuildContextInheritedWidget InheritedWidget是一种widget用来tree向下传递变动信息,tree子节点中,可以通过调用BuildContext.dependOnInheritedWidgetOfExactType...所以我们使用BuildContext时候,一定要注意。 总结 BuildContext是构建Widget基础,它也提供了一些非常有用查找绑定功能,希望能对大家有所帮助。

    50710

    《Flutter 动画系列一》25种动画组件超全总结

    动画运行原理 任何程序动画原理都是一样,即:视觉暂留,视觉暂留又叫视觉暂停,人眼观察景物时,光信号传入大脑神经,需经过一段短暂时间,光作用结束后,视觉形象并不立即消失,这种残留视觉称“后像...电影就是依靠视觉暂留,感官上电影是连续。...Curve:决定动画执行曲线,AndroidInterpolator(差值器)是一样,负责控制动画变化速率,系统已经封装了10多种动画曲线,详见Curves类。...: AnimationControllerlowerBoundupperBound不能在直接设置为100300,因为AnimationController需要被CurvedAnimation使用,...这是《Flutter 动画系列》第一篇,接下来还有: 组合动画 自定义动画 到底如何选择动画控件

    1.4K20

    Flutter入门指南

    本文中,我们将介绍如何入门Flutter,包括环境搭建、基本概念、常用组件以及示例代码。 一、环境搭建 首先,我们需要搭建Flutter开发环境。...安装过程,请确保安装FlutterDart插件。 配置iOS开发环境(可选):如果你打算开发iOS应用,需要在macOS上安装Xcode,并配置相关环境。...二、基本概念 开始编写Flutter应用之前,我们需要了解一些基本概念: Widgets:Flutter一切都是Widget(部件)。Widget是构建UI基本元素,例如文本、按钮、布局等。...它是一个关键概念,用于Widget树查找数据传递数据。 三、创建一个简单Flutter应用 接下来,我们将创建一个简单Flutter应用,展示一个文本一个按钮。...例如,我们可以创建一个包含app barbody基本页面结构: Scaffold( appBar: AppBar( title: Text('Hello Flutter'), ),

    10310

    Flutter之旅:认识Widget(源码级)

    其次它继承自DiagnosticableTree 下图可见Widget类Flutter框架层是比较顶尖类。 ? ?...你之后就会知道,Widget是Flutter界面的中心,可显示页面上一切,都Widget相关。...---- 2.Widget状态 2.1:Widget状态概述 Widget源码明显指出了关于Widget状态问题: /// Widgets themselves have no mutable...State类widget属性到底是什么,这里通过debug可以看出,就是传入泛型类, 至于如何widget属性何时赋值以及渲染,先别急,还有一段很长路要走。...---- 3.从Icon源码看StatelessWidget组件 趁人打铁,为了大家对Widget有更好理解,这里挑选了两个Widget。 通过源码赏析一下:一个Widget是如何构成

    1.3K20
    领券