屏幕中间的 Flutter Tab 视图

Question

我试图在图像中实现类似的东西。但是当我尝试这样做时，出现了这个错误。

应用父数据时抛出以下断言： ParentDataWidget 使用不正确。

ParentDataWidget Expanded(flex: 1) 想要将 FlexParentData 类型的 ParentData 应用到已设置为接受不兼容类型 ParentData 的 ParentData 的 RenderObject。

屏幕变灰。

到目前为止我所做的是:-

GestureDetector(
      onTap: () {
        Navigator.push(
            context, MaterialPageRoute(builder: (context) => Detailedview(id)));
      },
      child: Container(
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5), //color of shadow
              spreadRadius: 1, //spread radius
              blurRadius: 1,
              // blurStyle: BlurStyle.normal,
              // blur radius
              offset: const Offset(0, 0),
            ),
          ],
          color: Colors.white,
          borderRadius: const BorderRadius.all(Radius.circular(15)),
        ),
        margin: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 5),
        width: 190.0,
        child: Stack(
          // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            //image
            Container(
              height: MediaQuery.of(context).size.height * 0.145,
              width: MediaQuery.of(context).size.width * 0.9,
              // height: MediaQuery.of(context).size.height * 0.09,
              // width: MediaQuery.of(context).size.width * 0.35,
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(15)),
                image: DecorationImage(
                    fit: BoxFit.cover,
                    image: CachedNetworkImageProvider(
                        "http://192.168.20.52:8081/uploads/" + image)),
              ),
            ),
            //black shadow
            Container(
              height: MediaQuery.of(context).size.height * 0.145,
              width: double.infinity,
              // height: MediaQuery.of(context).size.height * 0.09,
              // width: MediaQuery.of(context).size.width * 0.35,
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(15)),
                gradient: LinearGradient(
                    colors: [Colors.black.withOpacity(0.4), Colors.transparent],
                    begin: FractionalOffset.topCenter,
                    end: FractionalOffset.bottomCenter),
              ),
            ),
            //book mark
            GestureDetector(
              onTap: () async {
                if (bookmark == "False") {
                  await makebookmark(userid, id);
                }

                if (bookmark == "True") {
                  await deletebookmark(userid, id);
                }

                setState(() {
                  popularpackages = fetchpopularpackagebyid(userid);
                });
              },
              child: Padding(
                  padding: EdgeInsets.only(
                      top: MediaQuery.of(context).size.height * 0.115,
                      left: MediaQuery.of(context).size.width * 0.35),
                  child: Container(
                    height: 44,
                    width: 44,
                    decoration: BoxDecoration(
                      color: Colors.grey[300]?.withOpacity(0.6),
                      borderRadius: const BorderRadius.all(Radius.circular(50)),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(5.0),
                      child: Container(
                        decoration: BoxDecoration(
                          color: bookmark == "False"
                              ? Colors.white
                              : const Color(Const.secondary),
                          borderRadius:
                              const BorderRadius.all(Radius.circular(50)),
                        ),
                        child: Icon(
                          Icons.bookmark_add,
                          color: bookmark == "False"
                              ? const Color(Const.secondary)
                              : Colors.white,
                        ),
                      ),
                    ),
                  )),
            ),
            //place name
            Padding(
              padding: EdgeInsets.only(
                  top: MediaQuery.of(context).size.height * 0.16, left: 10),
              child: Text(
                package,
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
                style: GoogleFonts.lato(
                  color: Colors.black,
                  textStyle: Theme.of(context).textTheme.headline4,
                  fontSize: 14,
                  fontWeight: FontWeight.w700,
                  fontStyle: FontStyle.normal,
                ),
              ),
            ),
            //district
            Padding(
              padding: EdgeInsets.only(
                  top: MediaQuery.of(context).size.height * 0.180, left: 10),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        const Icon(
                          Icons.location_on_outlined,
                          size: 20,
                          color: Color(Const.secondary),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(5.0),
                          child: SizedBox(
                            width: MediaQuery.of(context).size.width * 0.18,
                            child: Text(
                              tourPlace,
                              overflow: TextOverflow.ellipsis,
                              // 'Kochi',
                              style: GoogleFonts.spartan(
                                color: const Color(Const.secondary),
                                textStyle:
                                    Theme.of(context).textTheme.headline4,
                                fontSize: 12,
                                fontWeight: FontWeight.w600,
                                fontStyle: FontStyle.normal,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                    //price
                    Padding(
                      padding: const EdgeInsets.only(right: 15),
                      child: Text(
                        '$ ' + rate,
                        overflow: TextOverflow.ellipsis,
                        style: GoogleFonts.spartan(
                          color: const Color(Const.secondary),
                          textStyle: Theme.of(context).textTheme.headline4,
                          fontSize: 12,
                          fontWeight: FontWeight.w400,
                          fontStyle: FontStyle.normal,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            //book now
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Booknow(id)),
                  );
                },
                child: Container(
                    height: 25,
                    width: 70,
                    decoration: const BoxDecoration(
                      color: Color(Const.secondary),
                      borderRadius: BorderRadius.all(Radius.circular(25)),
                    ),
                    child: Center(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(0.0),
                            child: Text(
                              'Book Now',
                              style: GoogleFonts.spartan(
                                color: Colors.white,
                                textStyle:
                                    Theme.of(context).textTheme.headline4,
                                fontSize: 10,
                                fontWeight: FontWeight.w600,
                                fontStyle: FontStyle.normal,
                              ),
                            ),
                          ),
                        ],
                      ),
                    )),
              ),
            )
          ],
        ),
      ),
    );

Answer 1

您需要使用 TabBar 小部件。

更多信息here

这是一个运行例子

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Widget'),
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.cloud_outlined),
              ),
              Tab(
                icon: Icon(Icons.beach_access_sharp),
              ),
              Tab(
                icon: Icon(Icons.brightness_5_sharp),
              ),
            ],
          ),
        ),
        body: const TabBarView(
          children: <Widget>[
            Center(
              child: Text("It's cloudy here"),
            ),
            Center(
              child: Text("It's rainy here"),
            ),
            Center(
              child: Text("It's sunny here"),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

试试下面的答案希望对你有帮助： DefaultTabController & TabBar SingleTickerProviderStateMixin

在这里你使用 StateFulWidget 和 SingleTickerProviderStateMixin 如下

  import 'package:flutter/material.dart';

class Search extends StatefulWidget {
  const Search({Key? key}) : super(key: key);

  @override
  State<Search> createState() => _SearchState();
}

class _SearchState extends State<Search> with SingleTickerProviderStateMixin {
  TabController? _tabController;

  @override
  void initState() {
    _tabController = new TabController(length: 4, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              height: 150,
              child: Center(
                child: Text(
                  'Your Widget if you want',
                ),
              ),
              color: Colors.blue,
            ),
            TabBar(
              unselectedLabelColor: Colors.black,
              labelColor: Colors.red,
              tabs: [
                Tab(
                  icon: Icon(Icons.person),
                ),
                Tab(
                  icon: Icon(
                    Icons.add,
                  ),
                ),
                Tab(
                  icon: Icon(
                    Icons.deck,
                  ),
                ),
                Tab(
                  icon: Icon(
                    Icons.child_care,
                  ),
                ),
              ],
              controller: _tabController,
              indicatorSize: TabBarIndicatorSize.tab,
            ),
            Expanded(
              child: TabBarView(
                children: [
                  Center(
                    child: Text(
                      'Screen 1',
                    ),
                  ),
                  Center(
                    child: Text(
                      'Screen 2',
                    ),
                  ),
                  Center(
                    child: Text(
                      'Screen 3',
                    ),
                  ),
                  Center(
                    child: Text(
                      'Screen 4',
                    ),
                  ),
                ],
                controller: _tabController,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

您的结果屏幕->

屏幕中间的 Flutter Tab 视图

Flutter Tab view in the middle of the screen

user-interface

tabview

flutter