Как добиться эффекта, похожего на «шатер HTML» в приложении флаттера

Question

Я пытаюсь добиться эффекта выделения HTML в приложении Flutter.Я хочу, чтобы в верхней части приложения отображалось уведомление о автоматической прокрутке справа налево.

Answer 1

Я нашел решение: вы можете использовать горизонтальный просмотр списка, а с помощью функции animateto вы можете прокручивать текст внутри просмотра списка.Когда вы запускаете функцию animateto при запуске приложения, вы получаете эффект выделения.Это не лучший способ сделать шатер, но он работает:

import 'package:flutter/material.dart';
import 'dart:async';

class MyHomePage extends StatefulWidget {
  MyHomePageState createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

  AnimationController _controller;
  ScrollController scrollController;

  Timer _timer;

  @override
  void initState() {
    super.initState();
    scrollController = new ScrollController();
    animate();
  }



  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      body: new Stack(children: <Widget>[new Container(child: new ListView(
        controller: scrollController,
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          new Text("I figured out a solution: You can use a horizontal listview and with the animateto function you can scroll the text inside the listview")
        ],
      ),
      margin: new EdgeInsets.only(top: 100.0),)
    ])
    );
  }

  void animate() async{
        if(scrollController.positions.isNotEmpty){
          while(true) {
            await scrollController.animateTo(
                0.0, duration: new Duration(milliseconds: 400),
                curve: Curves.ease);
            await scrollController.animateTo(
                scrollController.position.maxScrollExtent,
                duration: new Duration(seconds: 8), curve: Curves.linear);
          }
        }else{
          _timer = new Timer(const Duration(milliseconds: 400), () {
            animate();
          });
        }

  }

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: new MyHomePage(),
    );
  }
}