Совместите виджет в нижней части RubberAnimationController с вкладками - PullRequest
Новая
       89

Совместите виджет в нижней части RubberAnimationController с вкладками

0 голосов
/ 29 апреля 2020

Я работаю над приложением флаттера, которому нужны две вкладки (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, кнопка должна отображаться в нижней части виджета нижнего листа.

Я хочу, чтобы выходные данные были такими же, как на любом мобильном экране. Размер: Ожидаемое изображение на выходе Но настоящее изображение на других устройствах выглядит следующим образом: Настоящее изображение на выходе

...