Like other programming languages dart dose support external module file system. Now in your mind the question is raise, what is a external file system. In flutter when we would work on a large project then there are so many screens, functions and other things in the project. We have to manage them separately otherwise they will be conflict with each other and we cannot file a particular screen or function in them if they are not organized. So we have to organized them via making module structure in our project. Using the module structure we can easily manage them with their screen names and function names. In today’s tutorial we would learn about Include Import Another Folder Dart File in Flutter and also call the widgets. Using the same method you can also call functions by making the class object. I’ve already made a tutorial on this topic so you can read it from here. So let’s get started 🙂 .
Contents in this project Include Import Another Folder Dart File in Flutter Call Widget Example in Android iOS :-
1. The first step is to open your flutter project and select the lib folder.
3. As you can see in above screenshot there are 1 modules name folder, our main.dart file and textmsg.dart file. We would call two file in our tutorial 1 inside from modules folder and 1 directly from lib folder in our main.dart file.
4. We would also make a file named as color_block.dart in modules folder.
5. Now finally see our below screenshot to understand the complete file structure of our project.
5. Now we have to start coding for the app. First we have to make a file in lib folder named as textmsg.dart. Below is the source code of textmsg.dart file. In this file we would simply making a Text widget with some random text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import 'package:flutter/material.dart'; void main() => runApp(TextMSG()); class TextMSG extends StatelessWidget { @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.all(10), child: Center( child: Text( 'This Text Message is Written Inside LIB folder External Dart File textmsg.dart', style: TextStyle(fontSize: 21), textAlign: TextAlign.center, ))); } } |
6. Creating another file named as color_block.dart inside your lib -> modules folder. In this file we would show a color block with some text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import 'package:flutter/material.dart'; void main() => runApp(LightBlueBox()); class LightBlueBox extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors.lightBlueAccent, height: 100.0, child: Center( child: Text( 'This Text Message is Written Inside LIB folder External Dart File color_block.dart', style: TextStyle(fontSize: 21, color: Colors.white), textAlign: TextAlign.center, ))); } } |
7. Now open your project’s main.dart file and paste below code to import both above files properly and use their widgets in our main class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import 'package:flutter/material.dart'; import 'textmsg.dart'; import 'modules/color_block.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ TextMSG(), LightBlueBox() ])))); } } |
Screenshot of App:
