flutter_fancy_tree_view with AlertDialog

[phamducthinhdev]

Hello everyone, currently I want to customize flutter_fancy_tree_view with AlertDialog, I wonder if anyone has tested it and can give me a sample for reference? Thanks GestureDetector( onTap: () async { await showDialog<void>( context: context, builder: (context) => AlertDialog( content: Column( mainAxisSize: MainAxisSize.min, children: [ Stack( clipBehavior: Clip.none, children: <Widget>[ Positioned( right: -40, top: -40, child: InkResponse( onTap: () { Navigator.of(context).pop(); }, child: const CircleAvatar( backgroundColor: AppColors.main, child: Icon( FluentIcons.dismiss_28_filled, color: Colors.white, ), ), ), ), ], ), SingleChildScrollView( scrollDirection: Axis.horizontal, child: SizedBox( // Adjust the width based on your estimated number of children width: MediaQuery.of(context).size.width * 1.5, child: TreeView<MyNode>( treeController: treeController, nodeBuilder: (BuildContext context, TreeEntry<MyNode> entry) { return MyTreeTile( key: ValueKey(entry.node), entry: entry, onTap: () => treeController .toggleExpansion(entry.node), ); }, ), ), ) ], ), )); }, child: AbsorbPointer( child: TextFormField( controller: farmController, keyboardType: TextInputType.text, validator: (String? value) { if (value!.isEmpty) { return AppLocalizations.of(context)! .translate('errInputField'); } else { return null; } }, decoration: InputDecoration( fillColor: AppColors.main, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: AppColors.main), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: AppColors.main), ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(8), ), labelText: AppLocalizations.of(context)! .translate('lblWorkOrderLocation'), suffixIcon: const Icon( Icons.date_range_outlined, color: AppColors.main, ), ), style: CustomStyle.defaultStyle, ))),

[vivagelive]

Hi! I`m trying something like this:

 onPressed: () {
            showDialog(
                context: context,
                builder: (context) {
                  return Dialog(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    child: Stack(
                      clipBehavior: Clip.none,
                      alignment: Alignment.topRight,
                      children: [
                        Padding(
                          padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
                          child: SingleChildScrollView(
                            child: Column(
                              children: [
                                Container(
                                    color: Colors.white60,
                                    height: (height),
                                    child: CrossScroll(
                                        child: SizedBox(
                                            height: height,
                                            width: MediaQuery.sizeOf(context)
                                                    .width *
                                                2, //todo think
                                            child: Column(
                                                mainAxisSize: MainAxisSize.min,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.stretch,
                                                children: [
                                                  //YOUR DATA  TREE WIDGET. YOU CAN INSERT "MinimalTreeView.dart" FROM example
                                                ])))),
                              ],
                            ),
                          ),
                        ),
                        Positioned(
                          top: -10,
                          right: -10,
                          child: IconButton(
                            icon: const Icon(
                              Icons.close,
                              color: Colors.red,
                            ),
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                          ),
                        ),
                      ],
                    ),
                  );
                });
          },

You can try it. Good luck. P.S. Thanks again to @baumths for this package :)

[baumths]

Hey @phamducthinhdev.

Sorry for taking so long to reply, hope it isn't too late. Could you provide some more information on your issue?

[baumths]

I'm not sure if this is what you were looking for:

Example

Here is the implementation, using the MinimalTreeView from the examples directory:

Future<T?> showTreeViewDialog<T>(BuildContext context) {
  final Size appScreenSize = MediaQuery.sizeOf(context);
  return showDialog<T>(
    context: context,
    builder: (context) => AlertDialog(
      content: SizedBox(
        height: appScreenSize.height * .8,
        child: Stack(
          clipBehavior: Clip.none,
          children: [
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: SizedBox(
                width: appScreenSize.width * 1.5,
                child: const MinimalTreeView(),
              ),
            ),
            Positioned(
              top: -10,
              right: -10,
              child: IconButton(
                icon: const Icon(Icons.close),
                onPressed: () => Navigator.of(context).pop(),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

You should be able to just replace the MinimalTreeView from the code above with your implementation and it should work.

I'm going to close this issue for now. Feel free to reopen if needed.