Всплывающая панель вкладок и TabBarView внутри тела приложения

#flutter #flutter-layout

#всплывающее окно #всплывающее окно-макет

Вопрос:

Я пытался создать пользовательский интерфейс для своего приложения таким образом. Но представления вкладок не видны. Я использовал вкладки во многих приложениях flutter, но пользовательский интерфейс должен быть точно таким, как показано ниже

Панель приложений с изображением в качестве фона
Половина изображения пользователя в разделе appbar и остальное под ним
Панель вкладок под ними . . . .

Мой код здесь

 class _MyHomePageState extends State<MyHomePage> with 
TickerProviderStateMixin{
double screenSize;
double screenRatio;
AppBar appBar;
List<Tab> tabList = List();
TabController _tabController;
@override
void initState() {
tabList.add(new Tab(text:'Overview',));
tabList.add(new Tab(text:'Workouts',));
_tabController = new TabController(vsync: this, length: 
tabList.length);
super.initState();
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
screenSize = MediaQuery.of(context).size.width;
appBar = AppBar(
 backgroundColor: Colors.transparent,
 elevation: 0.0,
);
return Container(
 color: Colors.white,
 child: Stack(
   children: <Widget>[
     new Container(
       height: 300,
       width: screenSize,
       decoration:new BoxDecoration(
         image: new DecorationImage(
           image: new AssetImage("images/app_image.jpg"),
           fit: BoxFit.cover,
         ),
       ),
     ),
     Scaffold(
       backgroundColor: Colors.transparent,
       appBar: appBar,
       body:
         Stack(
           children: <Widget>[
             new Positioned(
               child: Column(
                 children: <Widget>[
                   Center(
                     child: Container(
                       child: CircleAvatar(
                           backgroundImage: 
NetworkImage('http://res.cloudinary.com/'),
                         backgroundColor: Colors.green,
                         radius: 20,
                       ),
                     ),
                   ),
                   SingleChildScrollView(
                     child: Container(
                       color: Colors.white,
                       child: Column(
                         mainAxisAlignment: MainAxisAlignment.center,
                         children: <Widget>[
                           new Text('* * * * *',textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0,color: Colors.pink),),
                           new Text('CAPTAIN',textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0)),
                         ],
                         crossAxisAlignment: CrossAxisAlignment.center,
                       ),
                     ),
                   ),
                 ],
               ),
               width: screenSize,
               top: 170,
             ),
              new Positioned(
                width: screenSize,
                top: 310,
                child: Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: new Column(
                   children: <Widget>[
                     new Container(
                       decoration: new BoxDecoration(color: Theme.of(context).primaryColor),
                       child: new TabBar(
                         controller: _tabController,
                         indicatorColor: Colors.pink,
                         indicatorSize: TabBarIndicatorSize.tab,
                         tabs: tabList
                       ),
                     ),
                     new Container(
                       height: 20.0,
                       child: new TabBarView(
                         controller: _tabController,
                         children: tabList.map((Tab tab){
                           _getPage(tab);
                         }).toList(),
                       ),
                     )
                   ],
             ),
                ),
              )
           ],
         ),
     ),
   ],
 ),
 );
 }
Widget _getPage(Tab tab){
switch(tab.text){
  case 'Overview': return OverView();
  case 'Orders': return Workouts();
 }
}
}

1. Просто чтобы вы знали… вам не нужно делать width: screenSize… вы можете сделать width: double.infinity, и это заставит ширину заполнять экран (иначе говоря, ширину вашего экрана)

2. @Rafid Kotta Предок виджета MediaQuery не найден. Не могли бы вы предоставить родительский виджет

Ответ №1:

 tabList.map((Tab tab){
   _getPage(tab);
}).toList()

Приведенный выше фрагмент взят из предоставленного вами кода, вы вызвали _getPage(tab) на карте без инструкции return. Просто внесите небольшое изменение в это

 tabList.map((Tab tab){
   return _getPage(tab);
}).toList()

Или

 tabList.map((Tab tab) => _getPage(tab)).toList()

Ответ №2:

 children: tabList.map((Tab tab){
         _getPage(tab);
         }).toList(),

Каким-то образом эта вышеприведенная логика приведет к получению null дочерних элементов для TabBarView, поэтому просмотр вкладок не отображается, необходимо проверить это.

В противном случае вы можете назначить дочерние элементы TabBarView вручную

 children: <Widget>[
  OverView(),
  Workouts(),
],