How to Add a New Screen

Estimated reading: 3 minutes 59 views

FlutKit Dashboard UI Kits includes a ready-to-clone starter page/screen so you can quickly build new pages without starting from scratch. The recommended workflow is by duplicating the starter_page_screen.dart file.

1. Duplicate the starter page

Locate and duplicate starter_page_screen.dart.

Dart
/demo/page/starter_page_screen.dart

Rename it to something meaningful, for example:

Dart
my_new_screen.dart

2. Rename the screen widget

Open the file and rename the class:

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

  @override
  State<StarterPageScreen> createState() => _StarterPageScreenState();
}

class _StarterPageScreenState extends State<StarterPageScreen> {

to become:

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

  @override
  State<MyNewScreen> createState() => _MyNewScreenState();
}

class _MyNewScreenState extends State<MyNewScreen> {

Tips: In VSCode, you can use Ctrl + F2 to block and rename the class at the same time.

Update the title:

Dart
final pageTitle = 'My New Screen';

3. Adjust breadcrumbs

Find this section:

Dart
//breadcrumbs
Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Breadcrumbs(
      items: [
        BreadcrumbItem(
          label: lang.dashboard,
          uri: RouteUri.home,
        ),
        BreadcrumbItem(
          label: lang.pages(2),
          uri: '',
        ),
        BreadcrumbItem(
          label: lang.starterPage,
          uri: RouteUri.starterpage,
        )
      ],
    ),
  ],
),

Modify the label and route of BreadcrumbItem.

4. Add your own content

Inside the content section:

Dart
//content
Padding(
  padding: const EdgeInsets.all(kDefaultPadding),
  child: Column(
    children: [
      // your content here
    ],
  ),
),

You can insert any widgets such as forms, tables, charts, or cards here.

5. Manage Navigation to Your New Screen

Add route in app_router.dart

Open:

Dart
lib/app_router.dart

Add the string inside your RouteUri class:

Dart
static String myNewScreen = '/my-new-screen';

This RouteUri will appear as the url in the web browser.

example:

Dart
example.com/#/my-new-screen

Then add a new GoRoute:

Dart
GoRoute(
  path: RouteUri.myNewScreen,
  builder: (context, state) => const MyNewScreen(),
),

6. Navigate to the new screen

To navigate to your new screen, use:

Dart
GoRouter.of(context).go(RouteUri.myNewScreen);

Example of use in a button:

Dart
FlatButton(
  kText: 'Go to New Screen',
  kTextColor: Colors.white,
  bgColor: kSuccessColor,
  isFullWidth: true,
  onPressed: () {
   GoRouter.of(context).go(RouteUri.myNewScreen);
  },
),

Example of use as sidebar menu item:

Dart
SidebarMenuConfig(
  uri: RouteUri.myNewScreen, // navigate to myNewScreen
  title: (context) => Lang.of(context).newScreen,
  icon: Icons.chat_outlined,, 
  iconSize: 20, 
);
Share this Doc

How to Add a New Screen

Or copy link

CONTENTS