Home > Enterprise >  I am making a custom widget, how do I use it?
I am making a custom widget, how do I use it?

Time:10-28

I have a custom widget like code below

class FormHeader extends StatelessWidget {
  final VoidCallback onPressed;
  const FormHeader({required this.onPressed, Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
     return ElevatedButton(
       child: Text('click me'),
       onPressed: () async {
         try{
            print('first line');
            await this.onPressed();
            print('third line');
         }
         catch(e){
           Print('$e');
         }
       }
     );
  }
}


//in the main form

FormHeader(
  onPressed: () async{
    await Future.delayed(Duration(seconds: 5), ()=>throw Exception("second line"));
  }
)

please just copy paste this code in the test project and make it work to print first second and third in row!!!!

CodePudding user response:

From what I get this is somewhat you want!

Widget class

import 'package:flutter/material.dart';

class CustomBtn extends StatelessWidget {
  final String text;
  final Function onPressed;
  final bool outlineBtn;
  final bool isLoading;
  CustomBtn({this.text, this.onPressed, this.outlineBtn, this.isLoading});

  @override
  Widget build(BuildContext context) {
    bool _outlineBtn = outlineBtn ?? false;
    bool _isLoading = isLoading ?? false;

    return GestureDetector(
      onTap: onPressed,
      child: Container(
        height: 65.0,
        decoration: BoxDecoration(
          color: _outlineBtn ? Colors.transparent : Colors.black,
          border: Border.all(
            color: Colors.black,
            width: 2.0,
          ),
          borderRadius: BorderRadius.circular(
            12.0,
          ),
        ),
        margin: EdgeInsets.symmetric(
          horizontal: 24.0,
          vertical: 8.0,
        ),
        child: Stack(
          children: [
            Visibility(
              visible: _isLoading ? false : true,
              child: Center(
                child: Text(
                  text ?? "Text",
                  style: TextStyle(
                    fontSize: 16.0,
                    color: _outlineBtn ? Colors.black : Colors.white,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
            Visibility(
              visible: _isLoading,
              child: Center(
                child: SizedBox(
                  height: 30.0,
                  width: 30.0,
                  child: CircularProgressIndicator(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Main Class

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {


  void _submitForm() async {
    // Set the form to loading state
    setState(() {
      _loginFormLoading = true;
    });

    // Run the create account method
    String _loginFeedback = await _loginAccount();

    // If the string is not null, we got error while create account.
    if(_loginFeedback != null) {
      _alertDialogBuilder(_loginFeedback);

      // Set the form to regular state [not loading].
      setState(() {
        _loginFormLoading = false;
      });
    }
  }







  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                padding: EdgeInsets.only(
                  top: 24.0,
                ),
                child: Text(
                  "Welcome!\nLogin to your account",
                  textAlign: TextAlign.center,
                  style: Constants.boldHeading,
                ),
              ),
              Column(
                children: [
            
                  CustomBtn(
                    text: "Login",
                    onPressed: () {
                      _submitForm();
                    },
                    isLoading: _loginFormLoading,
                  )
                ],
              ),
          
               
              ),
            ],
          ),
        ),
      ),
    );
  }
}

As you can see the async is done in the main class level and that's where you create a void function/method and do whatever you want. Let the widget class be only a container for the functionality.

CodePudding user response:

typedef FutureCallback<T> = FutureOr<T> Function();

class Formheader extends StatelessWidget {
  const Formheader({Key? key, required this.onPressed}) : super(key: key);
  final FutureCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        try {
          debugPrint('first line');
          await onPressed();
          // debugPrint('third line');
        } catch (e) {
          debugPrint('$e');
        }

        debugPrint('third line');
      },
      child: const Text('Click me'),
    );
  }
}
  • Related