Flutter - multiple files for screens?

Question

I'm currently learning Flutter development (as well as Dart). It's my first mobile programming language.

I'm curious - is there a way to split screens into .dart files, or do they all have to be in the same main.dart file?

The app I'm building will have a lot of pages, so I don't want to make one giant main.dart file with 20+ different pages.

Is Flutter the right choice if I'm trying to make a large application like this?

Possible duplicate of [How to reference another file in Dart?](https://stackoverflow.com/questions/12951989/how-to-reference-another-file-in-dart) — Günter Zöchbauer, Jul 06 '18 at 06:55
I just want to know why you think flutter won't be able to handle your application and why any other platform would because Flutter is built to build cross-platform apps and gives the same performance as the native code and supports 60 fps,hot reload etc, flutter was designed considering that no matter How complex the UI it should be able to build in flutter — Mahesh Jamdade, Mar 11 '19 at 12:04

score 15 · Answer 1 · answered Jul 06 '18 at 06:56

15

You can split your code in as many files as you want. It's encouraged to have as little code as possible in lib/main.dart and all the other code split into various files. The only limitation is that code in one file (library) can not access private members of other files.

See How to reference another file in Dart? for how to import other Dart files.

answered Jul 06 '18 at 06:56

Günter Zöchbauer

623,577
216
2,003
1,567

2

But how to separate 1 screen layout into separate dart file. I have 1 complex screen with 5 tabs. So I want to separate each tab into another dart file. Do these 5 files needs to be a class and has build and also return a scaffold? – stuckedunderflow Dec 14 '18 at 10:39
2

I don't know details but usually you would make parts of your UI a widget and then move the widgets to different dart files and import them from there to where they are used (added to parents). You can have multiple widgets in one file. You can't split a single class into multiple files. You can also refactor the `build()` into functions and move functions to different files, but that's discouraged. Finer-grained widgets are the better approach for Flutter. https://stackoverflow.com/questions/51689435/what-scenarios-is-it-reasonable-to-use-a-function-to-define-a-widget-composition – Günter Zöchbauer Dec 14 '18 at 10:44
1

https://stackoverflow.com/questions/53234825/what-is-the-difference-between-functions-and-classes-to-create-widgets/53234826#53234826 – Günter Zöchbauer Dec 14 '18 at 10:44
2

in fact it works....just like you said just make it as Widget and move it to different dart file. So in this new dart file I use Class not function, it can either be stateless or statefull, and on build(BuildContext context) just return Widget like Container directly... don't use Scaffold anymore. This is why my code didn't work at first time. – stuckedunderflow Dec 15 '18 at 13:43

score 2 · Answer 2 · answered Mar 19 '23 at 18:51

Let's take as an example started project generated by the VSCode dart extension. It looks like this: main.dart:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
   return const MaterialApp(
       home: Scaffold(
       body: Center(
       child: Text('Hello World!'),
      ),
    ),
  );
 }
 }

Let's create a separate file for the home property widget. First, create home.dart file:

import 'package:flutter/material.dart';

class Home extends StatelessWidget{
   @override
   Widget build(BuildContext context) {
     // TODO: implement build
     throw UnimplementedError();
  }

}

Now we need:

to return the Scaffold widget from the Home build method
to replace the value of the home property of MaterialApp with Home().

home.dart:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return  Scaffold (
       body: const Center(
       child: Text('Hello World!'),
     )
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'home.dart';

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

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

    @override
   Widget build(BuildContext context) {
      return const MaterialApp(
      home: Home(),
      );
   }
 }

Flutter - multiple files for screens?

2 Answers2