ball_knowledge_graph 0.0.1

3D球效果的知识树

example/lib/main.dart

import 'package:ball_knowledge_graph/flutter_ball_graph.dart';
import 'package:ball_knowledge_graph/widget/controller.dart';
import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  RBallController controller= RBallController();

  late Future<List<RBallTagData>> _recommendUserfuture;
  bool isAllowNext = true;
  bool isAnimate = true;
  bool isShowLine = false;

  @override
  void initState() {
    _recommendUserfuture = _getRecommendUserList();

    super.initState();
  }

  Future<List<RBallTagData>> _getRecommendUserList2(String name) async {
    await Future.delayed(const Duration(milliseconds: 100));

    List datas = [
      {"tag": name, "id": "5fe618941ff65076de93c264"},
      {"tag": name, "id": "5d86e5ede5dd2942ab0a1917"},
      {"tag": name, "id": "6097ed9c1ff65076def09983"},
      {"tag": name, "id": "5d7cc493e5dd2942abb239b8"},
      {"tag": name, "id": "598873b97b6dc40027da4bfd"},
      {"tag": name, "id": "5d8c8bbae5dd2942ab31d19a"},
      {"tag": name, "id": "5d2845e1e5dd2942abd917f5"},
      {"tag": name, "id": "5ebf77273ee3b2b263173fd2"},
      {"tag": name, "id": "59793f34045962001bf00ec2"},
      {"tag": name, "id": "5fb312ed1ff65076deec5ab4"},
      {"tag": name, "id": "5f0c1bd13ee3b2b263ac71b7"},
      {"tag": name, "id": "5c13c9f6242a2407cb0cd5a3"},
      {"tag": name, "id": "61309edad768e953a15abe1f"},
      {"tag": name, "id": "598865db39f29d001b396695"},
    ];
    List<RBallTagData> list = [];
    if (datas.isNotEmpty) {
      for (var element in datas) {
        RBallTagData tag = RBallTagData.fromJson(element);
        list.add(tag);
      }
    }
    return list;
  }

  Future<List<RBallTagData>> _getRecommendUserList() async {
    await Future.delayed(const Duration(milliseconds: 100));
    List datas = [
      {"tag": "牛顿", "id": "5fe618941ff65076de93c264"},
      {"tag": "席辰", "id": "5d86e5ede5dd2942ab0a1917"},
      {"tag": "麦克斯韦", "id": "6097ed9c1ff65076def09983"},
      {"tag": "伽利略", "id": "5d7cc493e5dd2942abb239b8"},
      {"tag": "奶茶", "id": "598873b97b6dc40027da4bfd"},
      {"tag": "小柔蕾迪", "id": "5d8c8bbae5dd2942ab31d19a"},
      {"tag": "爱因斯坦", "id": "5d2845e1e5dd2942abd917f5"},
      {"tag": "宝贝", "id": "5ebf77273ee3b2b263173fd2"},
      {"tag": "鹿鹿︎", "id": "59793f34045962001bf00ec2"},
      {"tag": "芷妡.", "id": "5fb312ed1ff65076deec5ab4"},
      {"tag": "张三", "id": "5f0c1bd13ee3b2b263ac71b7"},
      {"tag": "李四四", "id": "5c13c9f6242a2407cb0cd5a3"},
      {"tag": "宅宅", "id": "61309edad768e953a15abe1f"},
      {"tag": "藍瓶", "id": "598865db39f29d001b396695"},
    ];
    List<RBallTagData> list = [];
    if (datas.isNotEmpty) {
      for (var element in datas) {
        RBallTagData tag = RBallTagData.fromJson(element);
        list.add(tag);
      }
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white70,
        appBar: AppBar(
          title: const Text(
            'Plugin example app',
            style: TextStyle(color: Color(0xFF333333)),
          ),
          backgroundColor: Colors.transparent,
          shadowColor: Colors.transparent,
        ),
        body: Container(
            width: double.infinity,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Visibility(
                  visible: !isAllowNext,
                  child: GestureDetector(
                      onTap: () {
                        controller.zoomOut(() {
                          setState(() {
                            _recommendUserfuture = _getRecommendUserList();
                            isShowLine = false;
                            isAllowNext = true;
                          });
                        });

                      },
                      child: const Padding(
                        padding: EdgeInsets.all(20),
                        child: Icon(Icons.arrow_back),
                      )),
                ),
                FutureBuilder<List<RBallTagData>>(
                  future: _recommendUserfuture,
                  builder: (BuildContext context, AsyncSnapshot snapshot) {
                    return Container(
                      width: MediaQuery.of(context).size.width * 2,
                      height: MediaQuery.of(context).size.width,
                      alignment: Alignment.center,
                      child: snapshot.connectionState == ConnectionState.done
                          ? snapshot.hasError
                              ? Text("Error: ${snapshot.error}")
                              : RBallView(
                                  isAnimate: isAnimate,
                                  isAllowNext: isAllowNext,
                                  controller: controller,
                                  isShowDecoration: false,
                                  mediaQueryData: MediaQuery.of(context),
                                  keywords: snapshot.data,
                                  // highlight: [snapshot.data[0],snapshot.data[1]],
                                  highlight: [],
                                  onTapRBallTagCallback: (RBallTagData data) {
                                    print('点击回调：${data.tag}');
                                    if (isAllowNext) {
                                      setState(() {
                                        _recommendUserfuture =
                                            _getRecommendUserList2(data.tag);
                                        isShowLine = !isShowLine;
                                        isAllowNext = false;
                                        isShowLine = true;
                                      });
                                    }
                                  },
                                  textColor: Colors.black,
                                  highLightTextColor: Colors.red,
                                  radius: 200,
                                  isShowLine: isShowLine,
                                )
                          : const Center(child: Text('加载中...'),),
                    );
                  },
                ),
              ],
            )),
        floatingActionButton: FloatingActionButton(
          child: Center(
            child: Icon(isAnimate ? Icons.pause : Icons.play_arrow),
          ),
          onPressed: () {
            setState(() {
              isAnimate = !isAnimate;
            });
          },
        ),
      ),
    );
  }
}