Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Separate widgets in other files flutter

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 {    
  @override
  _LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {

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

  @override
  Widget build(BuildContext context) {
    return
      _isLoading ?
      _loadingWidget(context)
          :
      Scaffold(
          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

like image 828
Ray Coder Avatar asked Mar 12 '20 09:03

Ray Coder


People also ask

How to split an app into widgets in flutter?

Using Flutter Outline: Use the Flutter Outline tool to split an app into widgets as shown below: Flutter Outline is present on the right-hand side as a hidden tab. After opening the tab we can see the Widget Tree of the current dart file. Right-click on the widget we want to extract -> click on Extract Widget.

How to extract widget from flutter outline?

Flutter Outline is present on the right-hand side as a hidden tab. After opening the tab we can see the Widget Tree of the current dart file. Right-click on the widget we want to extract -> click on Extract Widget. Give a name for the widget->Click Refactor. The widget will be extracted.

How to add AD modules in flutter?

The first step is to open your flutter project and select the lib folder. 2. Now we would make another folder named ad modules inside the lib folder. We have to put all the files inside the lib folder in order to make the use. 3. As you can see in above screenshot there are 1 modules name folder, our main.dart file and textmsg.dart file.

What is the performance impact of your flutter widgets?

Once you code an app of medium complexity, it becomes very important to think about the performance impact of your Flutter widgets. Thinking about app performance is about being a good app citizen. Not only the app will be smoother for the user, but also it will drain less battery.


2 Answers

please remove underline
change from

_loadingWidget(context)

to

loadingWidget(context)
like image 88
chunhunghan Avatar answered Nov 15 '22 05:11

chunhunghan


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.
like image 25
João Soares Avatar answered Nov 15 '22 07:11

João Soares