在 Flutter 中重新定位 TextButton

Question

我是 Flutter 新手，正在处理 Flutter 引导屏幕，我尝试了很多方法来重新定位文本按钮，但我做不到。

我希望文本按钮分别位于左下角和右下角，像这样

这是我为这个屏幕编写的代码。

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

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

    class WalkThroughScreenState extends State<WalkThroughScreen> {
    int _slideIndex = 0;

    final List<String> images = [
    "images/slide_1.png",
    "images/slide_2.png",
    "images/slide_3.png"
    ];

    final List<String> text1 = [
    "Snap the ultimate pictures",
    "Sync all Your Favourite Images & Videos",
    "Easily access Your Items on PC"
    ];
    final List<String> text0 = [
    "You will be able to create a folder, take as many pictures as you want, it will be 
    automatically stored in that folder",
    "All your images and videos will be automatically uploaded to a drive, when the WiFi network 
    is available",
    "You will be able to download the exact copies of the folders that you have stored on the 
    Phone"
    ];

    final IndexController controller = IndexController();

    @override
    Widget build(BuildContext context) {
    TransformerPageView transformerPageView = TransformerPageView(
    pageSnapping: true,
    onPageChanged: (index) {
    setState(() {
    this._slideIndex = index;
    });
        },
        loop: false,
        controller: controller,
        transformer: new PageTransformerBuilder(
            builder: (Widget child, TransformInfo info) {
          return new Material(
            color: Colors.white,
            elevation: 8.0,
            textStyle: new TextStyle(color: Colors.white),
            borderRadius: new BorderRadius.circular(12.0),
            child: new Container(
              alignment: Alignment.center,
              color: Colors.white,
              child: Padding(
                padding: const EdgeInsets.all(18.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    new ParallaxContainer(
                      child: CircleAvatar(
                        radius: 150.0,
                        backgroundColor: Colors.lightBlueAccent,
                        child: new Image.asset(
                          images[info.index],
                          fit: BoxFit.contain,
                          height: 350,
                        ),
                      ),
                      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.black,
                          fontSize: 27.0,
                          fontFamily: 'Segoe UI',
                          //fontWeight: FontWeight.bold
                        ),
                      ),
                      position: info.position,
                      translationFactor: 300.0,
                    ),
                    SizedBox(
                      height: 55.0,
                    ),
                    new ParallaxContainer(
                      child: new Text(
                        text0[info.index],
                        textAlign: TextAlign.center,
                        style: new TextStyle(
                          color: Colors.black,
                          fontSize: 20.0,
                          fontFamily: 'Segoe UI',
                          // fontWeight: FontWeight.bold
                        ),
                      ),
                      position: info.position,
                      opacityFactor: .8,
                      translationFactor: 400.0,
                    ),
                    SizedBox(
                      height: 45.0,
                    ),
                    new ParallaxContainer(
                        child: TextButton(
                          onPressed: () => print('Next'),
                          child: Text(
                            'Next',
                            style: TextStyle(
                              color: Colors.black,
                              fontSize: 20.0,
                              fontFamily: 'Segoe UI',
                            ),
                          ),
                        ),
                        position: info.position),
                    new ParallaxContainer(
                        child: TextButton(
                          onPressed: () => print('Skip'),
                          child: Text(
                            'Skip',
                            style: TextStyle(
                              color: Colors.black,
                              fontSize: 20.0,
                              fontFamily: 'Segoe UI',
                            ),
                          ),
                        ),
                        position: info.position)
                  ],
                ),
              ),
            ),
          );
        }),
        itemCount: 3);

    return Scaffold(
      backgroundColor: Colors.white,
      body: transformerPageView,
    );
  }
}

我正在尝试重新定位容器内的按钮，但由于我对 flutter 知之甚少，我无法做到这一点，如果有人可以做到这一点，请告诉我。

Answer 1

您需要像这样将文本按钮包装成一行：

      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          new ParallaxContainer(
              child: TextButton(
                onPressed: () => print('Skip'),
                child: Text(
                  'Skip',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 20.0,
                    fontFamily: 'Segoe UI',
                  ),
                ),
              ),
              position: info.position),
          new ParallaxContainer(
              child: TextButton(
                onPressed: () => print('Next'),
                child: Text(
                  'Next',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 20.0,
                    fontFamily: 'Segoe UI',
                  ),
                ),
              ),
              position: info.position),
        ],
      ),

A Row 允许您将通过的 children 水平放置在其中。 mainAxisAlignment: MainAxisAlignment.spaceBetween, 参数将所有剩余的 space 放在两个按钮之间。您可以找到有关 flutter 布局的综合指南 here

在 Flutter 中重新定位 TextButton

Re-positioning of TextButton in Flutter

mobile

dart

flutter