Flutter Onboarding - Как провести два изображения одновременно? - PullRequest
0 голосов
/ 26 марта 2020

Я хочу смахнуть правые фоновые изображения с конечным изображением, расположенным в конце нижней части экрана, с плавающей кнопкой действия, и хочу смахнуть вправо список изображений с фоновыми изображениями, как и другие встроенные экраны. Здесь мне нужно 3 экрана, последний экран будет страница входа в систему. Для этого я использовал пакет просмотра страницы Transformer. В настоящее время я использовал изображение в плавающей кнопке действия, но оно не работает. Как я могу это сделать?

 import 'package:flutter/material.dart';
 import 'package:onlycentertainment/pages/splashscreen.dart';
 import 'package:transformer_page_view/transformer_page_view.dart';



class TestPage1 extends StatefulWidget {
  final String title;
  TestPage1({this.title});
  @override
  TestPage1State createState() {
    return new TestPage1State();
  }
}

class TestPage1State extends State<TestPage1> {
  int _slideIndex = 0;
  int _bottomIndex = 0;

  final List<String> images = [
    "assets/images/welcome01.jpg",
    "assets/images/welcome02.jpg",
    "assets/images/welcome01.jpg",
  ];

  final List<String> text0 = [
    "Welcome in your app",
    "Enjoy teaching...",
    "Showcase your skills",
    "Friendship is great"
  ];

  final List<String> text1 = [
    "App for food lovers, satisfy your taste",
    "Find best meals in your area, simply",
    "Have fun while eating your relatives and more",
    "Meet new friends from all over the world"
  ];

  final IndexController controller = IndexController();

  @override
  Widget build(BuildContext context) {

    TransformerPageView transformerPageView = TransformerPageView(
        pageSnapping: true,
        onPageChanged: (index) {
          setState(() {
            this._slideIndex = index;
            this._bottomIndex = index;
          });
        },
        loop: false,
        controller: controller,
        transformer: new PageTransformerBuilder(
            builder: (Widget child, TransformInfo info) {
              return SingleChildScrollView(
                physics: NeverScrollableScrollPhysics(),
                child: new Material(
                  child: new Container(
                    alignment: Alignment.center,
                    color: Colors.white,
                    child: Column(
                      children: <Widget>[
                        new ParallaxContainer(
                          child: new Image.asset(
                            images[info.index],
                            fit: BoxFit.cover,

                          ),
                          position: info.position,
                          translationFactor: 400.0,
                        ),
                        SizedBox(
                          height: 45.0,
                        ),
                        new ParallaxContainer(
                          child: new Text(
                            text1[info.index],
                            textAlign: TextAlign.center,
                            style: new TextStyle(
                                color: Colors.white,
                                fontSize: 28.0,
                                fontFamily: 'Quicksand',
                                fontWeight: FontWeight.bold),
                          ),
                          position: info.position,
                          translationFactor: 300.0,
                        ),
                      ],
                    ),
                  ),
                ),
              );
            }),
        itemCount: 3);

    return Scaffold(
      backgroundColor: Color(0xff243951),
      body: transformerPageView,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Container(
        height: 70,
        width: MediaQuery.of(context).size.width,
        child: IconButton(icon: Image.asset('assets/images/asset1.png'), onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context)=>SplashScreen()));
        }),
      ),
    );

  }
}

1 Ответ

0 голосов
/ 26 марта 2020

Я не уверен, что правильно понимаю, но проблема в вашем коде - это часть "SplashScreen ()", он не может быть пустым, я сделал рабочий пример, проверьте и дайте мне знать, если я неправильно понимаю, что вы хотел сделать.

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
import 'package:transformer_page_view/transformer_page_view.dart';

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

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

class TestPage1 extends StatefulWidget {
  final String title;
  TestPage1({this.title});
  @override
  TestPage1State createState() {
    return new TestPage1State();
  }
}

class TestPage1State extends State<TestPage1> {
  int _slideIndex = 0;
  int _bottomIndex = 0;

  final List<String> images = [
    "assets/images/welcome01.jpg",
    "assets/images/welcome02.jpg",
    "assets/images/welcome01.jpg",
  ];

  final List<String> text0 = [
    "Welcome in your app",
    "Enjoy teaching...",
    "Showcase your skills",
    "Friendship is great"
  ];

  final List<String> text1 = [
    "App for food lovers, satisfy your taste",
    "Find best meals in your area, simply",
    "Have fun while eating your relatives and more",
    "Meet new friends from all over the world"
  ];

  final IndexController controller = IndexController();

  @override
  Widget build(BuildContext context) {

    TransformerPageView transformerPageView = TransformerPageView(
        pageSnapping: true,
        onPageChanged: (index) {
          setState(() {
            this._slideIndex = index;
            this._bottomIndex = index;
          });
        },
        loop: false,
        controller: controller,
        transformer: new PageTransformerBuilder(
            builder: (Widget child, TransformInfo info) {
              return SingleChildScrollView(
                physics: NeverScrollableScrollPhysics(),
                child: new Material(
                  child: new Container(
                    alignment: Alignment.center,
                    color: Colors.white,
                    child: Column(
                      children: <Widget>[
                        new ParallaxContainer(
                          child: new Image.asset(
                            images[info.index],
                            fit: BoxFit.cover,

                          ),
                          position: info.position,
                          translationFactor: 400.0,
                        ),
                        SizedBox(
                          height: 45.0,
                        ),
                        new ParallaxContainer(
                          child: new Text(
                            text1[info.index],
                            textAlign: TextAlign.center,
                            style: new TextStyle(
                                color: Colors.white,
                                fontSize: 28.0,
                                fontFamily: 'Quicksand',
                                fontWeight: FontWeight.bold),
                          ),
                          position: info.position,
                          translationFactor: 300.0,
                        ),
                      ],
                    ),
                  ),
                ),
              );
            }),
        itemCount: 3);

    return Scaffold(
      backgroundColor: Color(0xff243951),
      body: transformerPageView,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Container(
        height: 70,
        width: MediaQuery.of(context).size.width,
        child: IconButton(icon: Image.asset(images[_bottomIndex]), onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context)=>SplashScreen(
              seconds: 4,
              navigateAfterSeconds: new AfterSplash(),
              title: new Text('Welcome In SplashScreen',
                style: new TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0
                ),
              )
          )
          )
          );
    }
    ),
          ),
        );

  }
}
class AfterSplash extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Welcome In SplashScreen Package"),
        automaticallyImplyLeading: false,
      ),
      body: new Center(
        child: new Text("Succeeded!",
          style: new TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 30.0
          ),
        ),
      ),
    );
  }
}
...