I want to make my code neater but I have a problem when I separate widgets that I use often in 1 file

here is it my main widget

import 'package:a_tiket/Helpers/widget_helper.dart';
class LoginPage extends StatefulWidget {    
  _LoginPageState createState() => _LoginPageState();
class _LoginPageState extends State<LoginPage> {

  bool _isLoading = false;
  var _message = '';
  var _hasError = false;

  Widget build(BuildContext context) {
      _isLoading ?
          body: SingleChildScrollView(
              child: Container(

this is my widget_helper.dart

Widget _loadingWidget (BuildContext context){
  return Scaffold(
    body: Center(
      child: CircularProgressIndicator(
        backgroundColor: ACCENT_COLOR,
        valueColor: new AlwaysStoppedAnimation<Color>(PRIMARY_COLOR),

the problem is i got some error. i have add import for widget_helper but still get error

lib/Pages/loginPage.dart:193:7: Error: The method '_loadingWidget' isn't defined for the class '_LoginPageState'.

what should i do? i just want to make the code neater

Solution 1: chunhunghan

please remove underline
change from




Solution 2: J. S.

There are a few issues with your code:

  • For such a small piece of code like showing a CircularProgressIndicator you should not be putting a method in a separate file. Instead of making your code "neater", you are making it harder to read. If you really want to have it in a separate file, create a Stateless widget that shows the code you want. But then again you are just using a CircularProgressIndicator. You aren't saving any code, just creating more unnecessary code.
  • You already have a Scaffold where your are going to show the CircularProgressIndicator. You don't need to have another one. It's not doing anything.
  • While Dart uses camelCase for variable naming, file names use snake_case. Try to use it when naming files.