颤振-圆角标杆

Question

我想在颤振中加入这种tabBars。请建议使用库或代码或任何想法来实现这一目标的任何方法。那会有帮助的。

谢谢你的帮助！

​

Answer 1

不是完美的，也不是优化的。我会在空闲时间更新。目前，您可以使用代码，并根据您的需求进行更改。

​

​

现场操场/演示：https://dartpad.dev/?id=610bea5fb086bf495550f99e9a9db839

Gist链接：https://gist.github.com/omishah/610bea5fb086bf495550f99e9a9db839

完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const CodeCyanApp());
}

class CodeCyanApp extends StatelessWidget {
  const CodeCyanApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int activeTabIndex = 0;
  int totalTabs = 5;

  static const bgColor = Colors.black;
  static const tabBgColor = Colors.orange;
  static const activeTabBgColor = Colors.white;
  static const tabCornerRadiusColor = bgColor;
  static const tabMinWidth = 90.0;
  static const tabRadius = 17.0;
  static const tabCornerRadius = 10.0;
  static const tabContentPadding = 12.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: bgColor,
      bottomNavigationBar: roundOutCornersTabBar(),
      body: const Text("DEMO"),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget roundOutCornersTabBar() {
    return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children:
            List<Widget>.generate(totalTabs, (index) => buildSingleTab(index)));
  }

  Widget buildSingleTab(int index) {
    return Wrap(crossAxisAlignment: WrapCrossAlignment.end, children: [
      (index == 0
          ? Stack(children: [
              Container(
                decoration: BoxDecoration(
                    color: index == activeTabIndex
                        ? activeTabBgColor
                        : tabBgColor),
                child: Container(
                    decoration: const BoxDecoration(
                        color: tabCornerRadiusColor,
                        borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(tabCornerRadius),
                        ))),
                width: 10,
                height: 10,
              )
            ])
          : Container()),
      InkWell(
          focusColor: Colors.transparent,
          highlightColor: Colors.transparent,
          splashColor: Colors.transparent,
          onTap: () => setState(() {
                activeTabIndex = index;
              }),
          child: Stack(
              alignment: (index == activeTabIndex - 1
                  ? Alignment.bottomRight
                  : index == activeTabIndex + 1
                      ? Alignment.bottomLeft
                      : Alignment.bottomCenter),
              children: [
                (index == activeTabIndex - 1 || index == activeTabIndex + 1
                    ? Container(width: 15, height: 15, color: activeTabBgColor)
                    : Container()),
                Container(
                  constraints: const BoxConstraints(minWidth: tabMinWidth),
                  child: Text("Tab ${index + 1}", textAlign: TextAlign.center),
                  padding: const EdgeInsets.all(tabContentPadding),
                  decoration: BoxDecoration(
                      color:
                          index == activeTabIndex ? Colors.white : tabBgColor,
                      borderRadius: BorderRadius.only(
                          bottomLeft: (index == activeTabIndex + 1
                              ? const Radius.circular(tabRadius)
                              : const Radius.circular(0)),
                          bottomRight: (index != totalTabs - 1 &&
                                  index == activeTabIndex - 1
                              ? const Radius.circular(tabRadius)
                              : const Radius.circular(0)),
                          topLeft: const Radius.circular(tabRadius),
                          topRight: const Radius.circular(tabRadius))),
                ),
              ])),
      (index == totalTabs - 1
          ? Stack(children: [
              Container(
                decoration: BoxDecoration(
                    color: index == activeTabIndex
                        ? activeTabBgColor
                        : tabBgColor),
                child: Container(
                    decoration: const BoxDecoration(
                        color: tabCornerRadiusColor,
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(tabCornerRadius),
                        ))),
                width: 10,
                height: 10,
              )
            ])
          : Container())
    ]);
  }
}

Ps:将优化代码并修复我空闲时间内的任何错误。谢谢