Question 245521 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to move widget codes to another file for better readability

I have this flutter code, for now its short and is still manageable, but i foresee that it will be very long in the future so i would like to split the code in separate files. This code contains a navigation rail that is on the left side of the application. I would like for the navigation rail part (Starting from the Row widget) of the code be transferred to another file

//*main.dart*//
class _MainAppState extends State<MainApp> {

  int index = 0;
  bool expanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(left: 72.0),
              child: Column(
                children: <Widget>[
                  Expanded(
                    child: SfPdfViewer.network(
                      "https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf",
                    ),
                  ),
                ],
              ),
            ),
            Row(
              children: <Widget>[
                MouseRegion(
                  onEnter: (PointerEnterEvent event) {
                    expanded = true;
                    setState(() {});
                  },
                  onHover: (PointerHoverEvent event) {},
                  onExit: (PointerExitEvent event) {
                    expanded = false;
                    setState(() {});
                  },
                  child: NavigationRail(
                    selectedIndex: index,
                    extended: expanded,
                    destinations: const <NavigationRailDestination>[
                      NavigationRailDestination(
                        icon: Icon(Icons.one_k),
                        label: Text("one"),
                      ),
                      NavigationRailDestination(
                        icon: Icon(Icons.two_k),
                        label: Text("two"),
                      ),
                      NavigationRailDestination(
                        icon: Icon(Icons.three_k),
                        label: Text("three"),
                      ),
                    ],
                    onDestinationSelected: (int i) {
                      index = i;
                      setState(() {});
                    },
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

I attempted to create a function that returns the whole row widget, but i am faced with the problem that MouseRegion will loose access to expanded variable and setstate function

//*nav_rail.dart*//
Widget buildNavRail(BuildContext context){
  return 
        Row(
          children: <Widget>[
            MouseRegion(
              onEnter: (PointerEnterEvent event) {
                expanded = true;
                setState(() {});
              },
              onHover: (PointerHoverEvent event) {},
              onExit: (PointerExitEvent event) {
                expanded = false;
                setState(() {});
              },
              child: NavigationRail(
                selectedIndex: index,
                extended: expanded,
                destinations: const <NavigationRailDestination>[
                  NavigationRailDestination(
                    icon: Icon(Icons.one_k),
                    label: Text("one"),
                  ),
                  NavigationRailDestination(
                    icon: Icon(Icons.two_k),
                    label: Text("two"),
                  ),
                  NavigationRailDestination(
                    icon: Icon(Icons.three_k),
                    label: Text("three"),
                  ),
                ],
                onDestinationSelected: (int i) {
                  index = i;
                  setState(() {});
                },
              ),
            ),
          ],
        );
}

I have imported the file via import 'nav_rail.dart'. What is the proper way to do it in flutter? If it cant be done is there something like a C/C++ #include where the preprocessor will just literally copy past the contents of the file to where #include was

Tags:

2

Answers


  1. 0

    By default, a different file is a different library, and namespacing becomes significant. Any identifiers with a leading underscore are visible only within the library in which they were defined.

    Otherwise, yes, move your code to a different file, and use import to pull it in. Pretty simple.

    Login or Signup to reply.
  2. 0

    You can make some paramaters.
    Here is a example:

    //*nav_rail.dart*//
class NavRail extends StatefulWidget {
// ? means this paramater can be null.
// without ?, u need to add `required` like my example.
  final Function? onEnter;
  final Function? onExit;
  final Function? onDestinationSelected;
  final bool? expanded;
  // or can not be null
  // final bool expanded;
  final int? selectedIndex;
  const NavRail({
    super.key,
    this.onEnter,
    this.onExit,
    this.onDestinationSelected,
    this.expanded = false, //default value for nullable expanded,or u can make a if(widget.expanded == null) in use
    // or can not be null
    // required this.expanded,
    this.selectedIndex,
  });

  @override
  State<NavRail> createState() => _NavRailState();
}

class _NavRailState extends State<NavRail> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        MouseRegion(
          onEnter: (PointerEnterEvent event) {
            widget.onEnter?.call(event);
          },
          onHover: (PointerHoverEvent event) {},
          onExit: (PointerExitEvent event) {
            widget.onExit?.call(event);
          },
          child: NavigationRail(
            selectedIndex: widget.selectedIndex,
            extended: widget.expanded,
            destinations: const <NavigationRailDestination>[
              NavigationRailDestination(
                icon: Icon(Icons.one_k),
                label: Text("one"),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.two_k),
                label: Text("two"),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.three_k),
                label: Text("three"),
              ),
            ],
            onDestinationSelected: (int i) {
              widget.onDestinationSelected?.call(i);
            },
          ),
        ),
      ],
    );
  }
}

    Then u can use this widget like this:

                NavRail(
              expanded: expanded,
              selectedIndex: index,
              onEnter: (PointerEnterEvent event) {
                setState(() {
                  // do updates in setState, not after value changes.
                  expanded = true;
                });
              },
              onExit: (PointerExitEvent event) {
                setState(() {
                  expanded = false;
                });
              },
              // ... and other things u need to change.
            ),

    You can make anything to paramater, like ur destinations, just make a List< NavigationRailDestination> destinations as a new paramater.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search