Flutter Calling Internal Method and External Class Widgets

In this tutorial, let’s learn how to call internal widgets and external class widgets from a dart file.
In flutter, everything are widgets. So we can make a set of layout design codes as a Widget. Like reusing codes in others languages, we can call these widgets as we needs.

Look at this code:

 Container(  
   child: Column(
     mainAxisAlignment: MainAxisAlignment.spaceBetween,
     children: [
       Text("Item 1"),
       Text("item 2"),
       Text("item 3"),
     ],
   ),
 )

Here, in the Column, there are three children (Item 1, Item 2, Item 3), all are inline codes are written directly inside a widget.

Output:

Internal Widgets

These are the widgets written in the same dart file but inside the extended class (After closing the build widget).

Here created a new internal widget named myInternalWidget and returned some text.

 Widget myInternalWidget()
 {
   return Container(
     child:
     Text("from Internal Widget"),
   );
 }

Now we can call the widget by its name from anywhere on this file. Here revoked from the build widget.

Full code:

 import 'package:flutter/material.dart'; 
 void main()
 {
   runApp(
       MaterialApp(
         home: MyApp(),
       )
   );
 }
 class MyApp extends StatefulWidget {
   @override
   _MyAppState createState() => _MyAppState();
 } 
 class _MyAppState extends State {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: new AppBar(
         title: new Text("My App Title"),
       ),
       backgroundColor: Colors.white70,
       body:     Container(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
             Text("inline text"),
             myInternalWidget(),
             Text("item 3"),
           ],
         ),
       ),
     );
   } 
 Widget myInternalWidget()
   {
     return Container(
       child:
       Text("from Internal Widget"),
     );
   } 
}

Output:

External Widget

In here, an external widget means, widget created on an external dart file but inside the same project.

Creating an additional dart library file:

We can simply create new dart file inside the project lib folder.
On project window, right click on ‘lib’ -> New -> Dart File.

Give a name for the file (here text extFile is given).
Inside the new dart file, create a statefull widget.
Note: Make sure the class name is same as the file name and the make the first letter capital.
Inside the container in the new file, just return the code that you want to send to called location. Here some text returned.

Complete code of extFile.dart

import 'package:flutter/material.dart'; 
class ExtFile extends StatefulWidget {
   @override
   _ExtFileState createState() => _ExtFileState();
 }
 class _ExtFileState extends State {
   @override
   Widget build(BuildContext context) {
     return Container(
       child: Text("from External Widget"),
     );
   }
 } 

Calling an external dart file Widget:

Here we are going call this file from our main file (main.dart).
At the top of the main file, just import the second created file (extFile.dart) using the keyword import.

 import 'package:new_app/extFile.dart';

Now you can directly call the second file by its class name as a function.
Here the child item 3 on the Column is replaced by new class name.

 child: Column(
   mainAxisAlignment: MainAxisAlignment.spaceBetween,
   children: [
     Text("Inline text"),
     myInternalWidget(),
     ExtFile();
   ],
 )

Complete code (main.dart)

import 'package:flutter/material.dart';
import 'package:new_app/extFile.dart';
 void main()
 {
   runApp(
       MaterialApp(
         home: MyApp(),
       )
   );
 }
 class MyApp extends StatefulWidget {
   @override
   _MyAppState createState() => _MyAppState();
 } 
 class _MyAppState extends State {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: new AppBar(
         title: new Text("My App Title"),
       ),
       backgroundColor: Colors.white70,
       body:     Container(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
             Text("Inline text"),
             myInternalWidget(),
             ExtFile();
           ],
         ),
       ),
     );
   } 
 Widget myInternalWidget()
   {
     return Container(
       child:
       Text("from Internal Widget"),
     );
   } 
}

Output: