How to use Custom Widgets in flutter

Question

I am new to Flutter and I am following Flutter's official tutorial to learn basics of flutter.

So, I want to create a reusable component named "CustomCard" and I did this:

class CustomCard extends StatelessWidget {
CustomCard({@required this.index, @required this.onPress});

   final index;
   final Function onPress;

   @override
   Widget build(BuildContext context) {
      return Card(
          child: Column(
              children: <Widget>[
                  Text('Card $index'),
                  FlatButton(
                      child: const Text('Press'),
                      onPressed: this.onPress,
                  )
             ],
          ),
      );
   }
}

Now, to use it in MyApp, I did this:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Welcome to flutter',
                home: Scaffold(
                    appBar: AppBar(
                        title: Text('hello'),
                    ),
                body: Center(
                    child: Text('centre'),
                    CustomCard(
                        index:'card1',
                        onPress: print(' this is $index')
                    ),
                ),
            ),
        );
       }
      }

Now my IDE says that:

The method 'CustonCard' isn't defined for the class 'MyApp'.

How to solve this?

Error in terminal:

Compiler message:
lib/main.dart:17:6: Error: Place positional arguments before named arguments.
Try moving the positional argument before the named arguments, or add a name to the argument.
                                        CustomCard(
                                        ^^^^^^^^^^
lib/main.dart:17:6: Error: Expected named argument.
                                        CustomCard(
                                        ^
lib/main.dart:15:21: Error: No named parameter with the name '#1'.
        body: Center(
                    ^^...
/C:/src/flutter/packages/flutter/lib/src/widgets/basic.dart:1863:9: Context: Found this candidate, but the arguments don't match.
  const Center({ Key key, double widthFactor, double heightFactor, Widget child })

Edit: corrected a spelling mistake. Also adding console log.

Does this answer your question? can we create a new widget in Flutter? — Patel Pinkal
– Patel Pinkal, Commented Apr 14, 2020 at 11:57
Check answer link from above same question link : stackoverflow.com/a/58199366/7235539 — Patel Pinkal
– Patel Pinkal, Commented Apr 14, 2020 at 11:58

Leonardo Emili · Accepted Answer · 2020-04-14 14:46:23Z

1

You have got a few mistakes going on, but don't worry it happens at the very beginning. So let's step into the problems:

First, inside the body you've defined a Center Widget which only allows a single child within it but you have tried to put two Widgets (Text and CustomCard). So to put both widgets you could change it to something like this:

Center(
      child: Column(
        children: <Widget>[
          Text('centre'),
          CustomCard(...)
        ],
      ),
    ),

Moreover, pay attention that the onPress function takes a Function as argument but you are passing the result of print(...) which is void. Simply change it to:

CustomCard(index: index, onPress: () => print(' this is $index'))

Finally, I think you missed to define the index variable. Simply add:

String index = "card1";

answered Apr 14, 2020 at 14:46

Leonardo Emili

4014 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yakub Pasha · Accepted Answer · 2020-04-14 12:22:23Z

1

Hey Please check the updated code here. There are couple of compile errors as you are wrapping up both Text and you CustomWidget in Center where it accepts only one child widget and also at the onPress method some code change required.

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to flutter',
      home: Scaffold(
          appBar: AppBar(
            title: Text('hello'),
          ),
          body: Center(
              child:Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('centre'),
                  CustomCard(
                      index:'card1',
                      onPress: onPress
                  )
                ],
              )
          )
      ),
    );
  }
  onPress(index){
    print("this is $index");

  }
}
class CustomCard extends StatelessWidget {

  CustomCard({@required this.index, @required this.onPress});

  final index;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          Text('Card $index'),
          FlatButton(
            child: const Text('Press'),
            onPressed: (){
              this.onPress(index);
            },
          )
        ],
      ),
    );
  }
}

edited Apr 14, 2020 at 12:22

answered Apr 14, 2020 at 11:32

Yakub Pasha

5331 gold badge5 silver badges19 bronze badges

2 Comments

Himanshu Suthar Over a year ago

Edit: Corrected the spelling mistake. Also, adding error in my query.

Himanshu Suthar Over a year ago

Leonardo's answer worked for me. Although, you pointed out same issue.

Sandeep Pareek · Accepted Answer · 2021-02-04 18:08:33Z

                  child: Center(
                child: Row(
                  children: <Widget>[
                    _box(), //Custom pin view
                    _box(), //Custom pin view
                    _box(), //Custom pin view
                    _box(),//Custom pin view
                  ],
                ),
              )

and Custom Widgets (_box) Code

Widget _box() {
return Container(
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 3),
alignment: Alignment.center,
height: 50,
width: 50,
child: TextField(
  keyboardType: TextInputType.number,
  maxLength: 1,
  decoration: InputDecoration(border: InputBorder.none, counterText: ''),
),
decoration: BoxDecoration(border: Border.all(color: Colors.blue)),

); }

Collectives™ on Stack Overflow

How to use Custom Widgets in flutter

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related