Issue creating a button variable in Flutter - android

I am currently using flutter for an android app and I am using the "Routegenerator.dart" method for navigating . In this project, a certain button gets repeated multiple times and always leads to the same page. I want to create a variable of this button to clean the code a bit and avoid myself useless repetitions. The issue here is that I need to put the variable after the class with the scaffold, and this causes the Navigator.of(context).pushNamed() to give me an error in the (context).
How to solve this issue please?

you can call TextButtonWidget anywhere in your screen like this:
TextButtonWidget(
onTap: (){
Navigator.of(context).pushNamed('anyScreen');
},),
Import this widget
import 'package:flutter/material.dart';
class TextButtonWidget extends StatelessWidget {
const TextButtonWidget({
Key? key,
required this.onTap,
}) : super(key: key);
final VoidCallback onTap;
#override
Widget build(BuildContext context) {
ThemeData _theme = Theme.of(context);
return Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(8.0),
child: const Text('Choose me')),
),
);
}
}

Related

Keyboard immediately disappear when onTap event fired in Flutter

I'm developing a flutter app using Bloc, Division, and Get for the navigation.
I have a text field reusable component that I use in most of the fields that I create, the text field works properly on iOS without any issues, but on Android the Keyboard immediately disappear when I tap the field.
Here are the things that I've done but it still doesn't work:
Not using text field from the component, but directly create another one on the page
Create my own testing page that only used to test the text field
Using resizeToAvoidBottomInset: false, defined the controller as a static final
The only thing that works is when I create another flutter project from the start.
my-testing.dart
import 'package:flutter/material.dart';
class MyTesting extends StatefulWidget {
const MyTesting({Key? key}) : super(key: key);
#override
State<MyTesting> createState() => _MyTestingState();
}
class _MyTestingState extends State<MyTesting> {
late TextEditingController controller;
#override
void initState() {
controller = TextEditingController();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Just testing'),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: TextField(
controller: controller,
),
),
);
}
}

How do I create a Draggable without using DragTarget in Flutter?

I'm a newbie at Flutter. I'm trying to create a Draggable but I don't want to use a DragTarget. I want it to drag and drop wherever I want. When I did that after the drop operation object disappeared. I don't want it to disappear. How can I do that? I checked the resources and YouTube, however, I cannot find anything useful. Thanks in advance.
Following up to my comment, here is a code example.
You have a Stack, with your Draggable element, you then rebuild it to the new position using a Positioned widget and an offset.
You could also recreate a DragTarget following the same exemple, just repositioning it if you need its features.
You might need to adapt a bit the offset in order to make it react to your target element size.
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _started = false;
Offset _position = Offset(20, 20);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: <Widget>[
Positioned(
top: _position.dy - 30, // Size of widget to reposition correctly
left: _position.dx,
child: Draggable(
child: Chip(label: Text('Element')),
feedback: Material(
child: Chip(
label: Text('Element'),
)),
onDragEnd: (details) {
print(details.offset);
setState(() {
if (!_started) _started = true;
_position = details.offset;
});
},
),
),
],
),
),
);
}
}

flutter, next page with a variable controller

Excuse me guys, i tryin to build a new page, but with variable "nextcode" in it. so in the new page, it will show nextcode text
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Lemari(nextcode)));
},
but in the line "Widget build(String Kode) {" it must be like this "Widget build(BuildContext context) {"
class Lemari extends StatelessWidget {
#override
Widget build(String Kode) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue[900],
title: Text('this is th next page'),
),
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
Container(height: 100, width: 100, color: Colors.red, child: Text('hhe'),),
]
),
),
);
}
}
So anyone who can help me ? please :(
You don't have to change the build method parameters instead you should add a new parameter in the widget and require it
Example
const MyPageView({Key? key}) : super(key: key);
Here you can add another parameter.
Then inside the class you define that parameter.. so when you make a new MyPageView you will have to pass the newly added parameter
Bye :)
Your code should have a compiler error
In Lemari , you never declare nextcode and constructor also do not have parameter nextcode.
You can try like this, add
class Lemari extends StatelessWidget {
final String nextcode;
const Lemari({Key key, this.nextcode}) : super(key: key);
#override
Widget build(BuildContext context) {}
}
if your nextcode is String

Passing data from a StatelessWidget to a StatefulWidget

I am very new to flutter and I am trying to create a Generic Button widget that I can just pass parameters into (Text, color, etc.) keeping it short to just text right now. So I have setup my main app named SplashScreen and in the body I add the GenericButton class. I would like to know if there is a way for me to pass a string of text or any other kind of data, save that in my GenericButton class so that I can push that into my _GenericButtonState using widget.buttonText
final String _title = "Flutter Demo";
// * This is the landing page
class SplashScreen extends StatelessWidget {
// * This widget is the root of your application.
const SplashScreen({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
home: Scaffold
(
appBar: AppBar
(
title: Text(_title)
),
body: GenericButton() // <-- Statelful Widget I would like to pass data into.
)
);
}
}
// * Creating reusable button
class GenericButton extends StatefulWidget
{
final String buttonText;
const GenericButton(this.buttonText);
#override
_GenericButtonState createState() => _GenericButtonState();
}
class _GenericButtonState extends State<GenericButton>
{
#override
Widget build(BuildContext context)
{
return OutlinedButton(
child: Text(widget.buttonText),
onPressed: ()
{
Navigator.push(
context,
MaterialPageRoute(builder: (context) => LocationsPage()),
);
},
);
}
}
you can do that normally through constructor , this is working example from one of my projects
class PrimaryButton extends StatelessWidget {
final String text;
final Color color;
final Color textColor;
final Function onTap;
final EdgeInsets edgeInsets;
final bool pending;
const PrimaryButton({
Key key,
#required this.text,
#required this.onTap,
this.color = AppTheme.primaryColor,
this.textColor = AppTheme.secondaryColor,
this.edgeInsets = const EdgeInsets.symmetric(vertical: 4.0, horizontal: 16.0),
this.pending = false,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: pending ? null: onTap,
child: Container(
child: Center(
child: pending
? Padding(
padding: const EdgeInsets.all(5.0),
child: SpinKitThreeBounce(
color: AppTheme.scaffoldBackgroundColor,
size: 15.0,
),
)
: Text(
text,
style: AppTheme.textTheme.headline5.copyWith(fontSize: 18.0, fontWeight: FontWeight.bold,color: textColor),
),
),
margin: edgeInsets,
padding: EdgeInsets.all(12.0),
width: double.infinity,
decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(8.0)),
),
);
}
}
You have already defined the buttonText parameter. You have to pass a text into it (like the _title), and anytime you want a new text pass that as the new parameter.
Your GenericButton is a StatefulWidget, if the buttonText parameter changes, the widget won't redraw itself. The didChangeDependencies method will be fired and you need to handle the changes manually: update any state inside the _GenericButtonState
But:
If you change the GenericButton to StatelessWidget, any time the buttonText parameter changes the widget will redraw itself.
Conclusion:
As I understood what you want to build, you'd better have a GenericButton StatelessWidget with the parameters and pass them from the parent, which could be the StatefulWidget as that will manage the state of the texts and other arguments.
You can read more about state management here: https://flutter.dev/docs/development/data-and-backend/state-mgmt/options

Why doesn't anything show up the body of this flutter scaffold?

The class in question is invoked from another page with the line
onPressed: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) =>
ProPage(iD: bestRatedPros[index]["ID"])));
},
Where bestRatedPros is a list of maps with the variable iD for the following class -
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ProPage extends StatefulWidget {
ProPage({Key key, this.iD}) : super(key: key);
final iD;
#override
_ProPageState createState() => _ProPageState(iD);
}
class _ProPageState extends State<ProPage> {
int iD;
_ProPageState(this.iD);
#override
void initState() {
super.initState();
}
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.amber,
extendBodyBehindAppBar: true,
appBar: AppBar(
iconTheme: IconThemeData(
color: Colors.white, //change your color here
),
elevation: 0,
backgroundColor: Colors.amber
),
body:
Text("EWFWEFEWEWFWEF",style: TextStyle(color: Colors.black))
);
}
}
The getDataFromBackend function and
all the variables associated with it was meant to be within the body. But Nothing shows up in the body no matter what it is. Even a simple Text widget doesn't. I'm only trying to pass the variable iD from one page to the other without complicating things. The Run log doesn't show any Errors or warnings.
Arun,
See below where your Text is:
Reason for that is that you specified:
extendBodyBehindAppBar: true,
on your Scaffold, so body is expanded and top part of it is hidden behind AppBar

Categories

Resources