如何在 flutter 中創建類似箭頭的設計

Question

任何知道如何進行這樣設計的人單擊第一個箭頭時，會出現一個屏幕，完成該屏幕后，選項卡顏色變為綠色，然后單擊第二個箭頭會出現第二個屏幕，然后單擊第三個箭頭后會出現第三個屏幕，就像標簽屏幕一樣工作，我怎樣才能在 flutter 中實現這一點？

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

  @override
  _MainUiPageState createState() => _MainUiPageState();
}


class _MainUiPageState extends State<MainUiPage> with SingleTickerProviderStateMixin{

  TabController? _tabController;

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

  @override
  void dispose() {
    super.dispose();
    _tabController?.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child:  /*Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              // give the tab bar a height [can change hheight to preferred height]
              Container(
                height: 45,
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                  // borderRadius: BorderRadius.circular(
                  //   25.0,
                  // ),
                ),
                child: TabBar(
                  controller: _tabController,
                  // give the indicator a decoration (color and border radius)
                  indicator: BoxDecoration(
                    borderRadius: BorderRadius.circular(
                      25.0,
                    ),
                    color: Colors.green,
                  ),
                  labelColor: Colors.white,
                  unselectedLabelColor: Colors.black,
                  tabs: [
                    // first tab [you can add an icon using the icon property]
                    Tab(
                      text: 'Place Bid',
                    ),

                    // second tab [you can add an icon using the icon property]
                    Tab(
                      text: 'Buy Now',
                    ),
                    Tab(
                      text: 'Buy Now',
                    ),
                  ],
                ),
              ),
              // tab bar view here
              Expanded(
                child: TabBarView(
                  controller: _tabController,
                  children: [
                    // first tab bar view widget
                    Center(
                      child: Text(
                        'Place Bid',
                        style: TextStyle(
                          fontSize: 25,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),

                    // second tab bar view widget
                    Center(
                      child: Text(
                        'Buy Now',
                        style: TextStyle(
                          fontSize: 25,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),

                    // second tab bar view widget
                    Center(
                      child: Text(
                        'Buy Now',
                        style: TextStyle(
                          fontSize: 25,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),*/
        Row(
          children: [
            SizedBox(width: 15.w,),
            SizedBox(
              height: 250.h,
              width: 70.w,
              child: CustomPaint (
                painter: RPSCustomPainter1(),
                child: Align(
                  alignment: Alignment(-.2, -0.1), //litle left
                  child: Text(
                    "machines",
                    style: TextStyle(
                        fontSize: 18.sp,
                        ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 250.h,
              width: 70.w,
              child: CustomPaint(
                painter: RPSCustomPainter2(),
                child: Align(
                  alignment: const Alignment(-.2, -0.1), //litle left
                  child: Text(
                    "materials",
                    style: TextStyle(
                        fontSize: 18.sp,
                        ),
                  ),
                ),
              ),
            ),
            SizedBox(
              // Size(WIDTH,(WIDTH*0.58).toDouble())
              // Size(WIDTH, (WIDTH*0.14901960784313725).toDouble()),
              // Size(WIDTH,(WIDTH*0.8125).toDouble()),
              height: 250.h,
              width: 70.w,
              child: CustomPaint(
                painter: RPSCustomPainter3(),
                child: Align(
                  alignment: const Alignment(-.2, -0.1), //litle left
                  child: Text(
                    "component",
                    style: TextStyle(
                        fontSize: 18.sp,
                        ),
                  ),
                ),
              ),
            ),
            SizedBox(
              // Size(WIDTH,(WIDTH*0.58).toDouble())
              // Size(WIDTH, (WIDTH*0.14901960784313725).toDouble()),
              // Size(WIDTH,(WIDTH*0.8125).toDouble()),
              height: 250.h,
              width: 70.w,
              child: CustomPaint(
                painter: RPSCustomPainter3(),
                child: Align(
                  alignment: const Alignment(-.2, -0.1), //litle left
                  child: Text(
                    "component",
                    style: TextStyle(
                        fontSize: 18.sp,
                        ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

這是我完成的示例代碼，但它不能正常工作，任何人如何做到這一點請幫忙，我是新手。

Answer 1

你需要做這樣的事情......將所有Container在Stack中並設置每個Container的Positioned 。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: Container(
          width: double.infinity,
          child: Stack(
            children: [
              Positioned(
                left: 0,
                child: ClipPath(
                  clipper: CustomClipPathTopContainerOne(),
                  child: Container(
                    height: 50,
                    width: 200,
                    color: Colors.green,
                  ),
                ),
              ),
              Positioned(
                left: 175,
                child: ClipPath(
                  clipper: CustomClipPathTopContainerSecond(),
                  child: Container(
                    height: 50,
                    width: 200,
                    color: Colors.red,
                  ),
                ),
              ),
              Positioned(
                left: 350,
                child: ClipPath(
                  clipper: CustomClipPathTopContainerSecond(),
                  child: Container(
                    height: 50,
                    width: 200,
                    color: Colors.pink,
                  ),
                ),
              ),
            ],
          )
        ),
      ),
    );
  }
}

class CustomClipPathTopContainerOne extends CustomClipper<Path> {

  @override
  Path getClip(Size size) {
    double w = size.width;
    double h = size.height;

    Paint paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth=10.0
      ..color = Colors.black;

    Path path0 = Path();
    path0.moveTo(0,size.height);
    path0.lineTo(0,size.height*0.4890143);
    path0.lineTo(0,0);
    path0.lineTo(size.width*0.8545167,0);
    path0.lineTo(size.width,size.height*0.4991714);
    path0.lineTo(size.width*0.8551250,size.height);
    path0.lineTo(0,size.height);
    path0.lineTo(size.width*0.0013417,size.height);
    path0.lineTo(0,size.height);
    path0.close();
    return path0;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

class CustomClipPathTopContainerSecond extends CustomClipper<Path> {

  @override
  Path getClip(Size size) {
    double w = size.width;
    double h = size.height;

    Paint paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth=10.0
      ..color = Colors.black;

    Path path0 = Path();
    path0.moveTo(0,size.height);
    path0.lineTo(size.width*0.1459833,size.height*0.5012000);
    path0.lineTo(0,0);
    path0.lineTo(size.width*0.8545167,0);
    path0.lineTo(size.width,size.height*0.4991714);
    path0.lineTo(size.width*0.8551250,size.height);
    path0.lineTo(0,size.height);
    path0.lineTo(size.width*0.0013417,size.height);
    path0.lineTo(0,size.height);
    path0.close();
    return path0;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}