Question

我正在开发一个flutter应用程序，该应用程序需要使用橡胶动画控制器在底部工作表小部件内放置两个Tabs（TabBar），并在底部工作表小部件的底部对齐一个按钮。

到目前为止我所做的：

import 'package:rubber/rubber.dart';
import 'package:flutter/material.dart';
class Page extends StatefulWidget {
  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page>
    with TickerProviderStateMixin {
  RubberAnimationController _controller;
  @override
  void initState() {
    _controller = RubberAnimationController(
        vsync: this,

        upperBoundValue: AnimationControllerValue(percentage: 0.8),
        lowerBoundValue: AnimationControllerValue(pixel: 40),
        duration: Duration(milliseconds: 200));
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: SafeArea(
        top: true,
        bottom: false,
        child: Scaffold(
            appBar: AppBar(
              title: Text("Page"),
            ),
            body: RubberBottomSheet(
              lowerLayer: Text("Page details"), // The underlying page (Widget)
              upperLayer: _getUpperLayer(), // The bottomsheet content (Widget)
              animationController: _controller, // The one we created earlier
            )),
      ),
    );
  }

  Widget tabBar= TabBar(tabs: [
    Tab(text: 'tab 1'),
    Tab(text: 'tab 2'),],
    labelStyle: TextStyle(fontSize: 18.0),
    unselectedLabelStyle: TextStyle(
      fontSize: 16.0,
    ),
    labelColor: Color(0xff202020),
    unselectedLabelColor: Color.fromRGBO(0, 0, 0, 0.5),
    indicatorColor: Colors.blueAccent,
    indicatorWeight: 4,
    indicatorSize: TabBarIndicatorSize.tab,
  );

  Widget _getUpperLayer() {
    return Container(
      height: MediaQuery.of(context).size.height*0.8,
      decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
                color: Color.fromRGBO(0, 0, 0, 0.2),
                offset: Offset(0, -1),
                blurRadius: 5)
          ],
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(24), topLeft: Radius.circular(24)),
          color: Colors.white),
      child:ListView(
          physics: NeverScrollableScrollPhysics(),
          children:<Widget>[
            DefaultTabController(
              length: 2,
              child: Column(
                children: <Widget>[
                  Container(
                    child:tabBar,
                  ),
                  SizedBox(
                    height:MediaQuery.of(context).size.height*0.47,

                    child: TabBarView(children: [
                      Container(
                        child: Text("Tab1 Container"),
                      ),
                      Container(
                        child:
                        Text("Tab2 Container"),
                      ),
                    ],
                    ),

                  )
                ],
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child:Padding(
                  padding: EdgeInsets.only(left:8.0, right: 8.0, top: 8.0),
                  child: ButtonTheme(
                      minWidth: MediaQuery.of(context).size.width,
                      child:RaisedButton(
                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                        color: Colors.blueAccent,
                        onPressed: () { },
                        child: const Text('APPLY', style: TextStyle(fontSize: 20)),
                        textColor: Colors.white,
                        elevation: 5,
                      ))
              ),
            ),
            ]
      ),

    );
  }

}

我在这里面临的问题是：即使我为SizedBox使用了屏幕尺寸比率，但对于不同屏幕尺寸的移动设备，对齐方式仍在变化。并且按钮未在屏幕底部对齐。

请帮助我将SizedBox的高度固定为任何大小的移动屏幕的常量，或者不管ListView中显示的内容如何，该按钮应显示在底部小部件的底部。

对于任何移动屏幕，我都希望输出像这样：Expected Output Image 但是其他设备上的当前输出则是这样的：Present Output Image

将rubberAnimationController底部的小部件与标签对齐

0 个答案: