I want to display captcha image and do verify it. So Please guys suggest me any package or idea to implement text captcha in flutter. I have already search for this but i have not got proper idea and any accurate packages.
I want look like below view in flutter,
I got little similar packages,
flutter_recaptcha_v2
enter link description here
But not complete my requirement. Please help me or suggest me. Thanks.
You can copy paste run full code below
You can use package https://pub.dev/packages/hb_check_code
code snippet
Widget build(BuildContext context) {
String code = randomAlpha(5);
return Scaffold(
...
body: Column(
children: [
Row(
children: [
Container(
alignment: Alignment.center,
child: HBCheckCode(
code: code,
)),
InkWell(
onTap: () {
setState(() {});
},
child: Icon(Icons.refresh)),
],
working demo
full code
import 'package:hb_check_code/hb_check_code.dart';
import 'package:flutter/material.dart';
import 'package:random_string/random_string.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'HBCheckCode Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CodeTestPage(),
);
}
}
class CodeTestPage extends StatefulWidget {
#override
_CodeTestPageState createState() => _CodeTestPageState();
}
class _CodeTestPageState extends State<CodeTestPage> {
#override
Widget build(BuildContext context) {
String code = randomAlpha(5);
return Scaffold(
appBar: AppBar(
title: Text("captcha"),
),
body: Column(
children: [
Row(
children: [
Container(
alignment: Alignment.center,
child: HBCheckCode(
code: code,
)),
InkWell(
onTap: () {
setState(() {});
},
child: Icon(Icons.refresh)),
],
),
],
));
}
}
Related
I want to make a floating widget but not floating all the time, when the widget is pulled up from the floating navigation bar it will appear like the picture in the middle
How to make a widget like this middle image?
this sample code of flutter for using showBottomSheet:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({super.key});
#override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: const Text('showBottomSheet'),
onPressed: () {
Scaffold.of(context).showBottomSheet<void>(
(BuildContext context) {
return Container(
height: 200,
color: Colors.amber,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('BottomSheet'),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
);
},
);
},
),
);
}
}
You can also try using sliding_up_panel to get the same functionality.
It is pretty straight forward to implement and offers plenty customization features as well:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
body: Stack(
children: <Widget>[
Center(child: Text("This is the Widget behind the sliding panel"),),
SlidingUpPanel(
panel: Center(child: Text("This is the sliding Widget"),),
)
],
)
);
}
Try the Stack variant so that it doesn't hinder too much with your current code.
I'm struggling to find way to access variable from different class. I want to change background image of decorationImage on button click. But because I do not want to rebuild entire state/page just the background I put the code to different class, but I'm not sure how to access _imagepath1 or _imagepath2 from other class.
class CustomMainPageState extends State<SecondRoute> {
Color myColor = Color(0xff5D6592);
String _imagepath1 = "images/image3.jpg";
String _imagepath2 = "images/image4.jpg";
Widget build(BuildContext context) => Container(
//color: Colors.transparent,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(_imagepath1), fit: BoxFit.cover)),
child: Scaffold(
class background extends StatefulWidget {
backgroundG createState() => backgroundG();
}
class backgroundG extends State<background> {
#override
Widget buildbottom() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
CircleAvatar(
radius: 25,
backgroundColor: Colors.white,
child: IconButton(
icon: Image.asset('images/icon2.png'),
onPressed: () => setState(() {
//_imagefile1 = _imagefile2;
}),
),
),
]);
}
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: [
SizedBox(height: 100),
buildbottom(),
//SizedBox(height: 10),
//SizedBox(height: 10),//puts empty box to space things out
],
),
);
}
}
Thank you for helping!
For passing one image to different class you can use flutter hero widget,
below is sample code of working with Hero widget check documentation also for more info about hero widget
import 'package:flutter/material.dart';
void main() => runApp(HeroApp());
class HeroApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Transition Demo',
home: MainScreen(),
);
}
}
class MainScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Main Screen'),
),
body: GestureDetector(
child: Hero(
tag: 'imageHero',
child: Image.network(
'https://picsum.photos/250?image=9',
),
),
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (_) {
return DetailScreen();
}));
},
),
);
}
}
class DetailScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: Center(
child: Hero(
tag: 'imageHero',
child: Image.network(
'https://picsum.photos/250?image=9',
),
),
),
onTap: () {
Navigator.pop(context);
},
),
);
}
}
for passing data between widgets or class I would suggest you to use InheritedWidget class or any state management like provider, bloc, getx to know more about this check this video and documentation and if you just want to pass single image then refer this blog
Please be kind and tell me where do I add the line of code and what logic to follow?
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final alreadySaved = _savedQuotes.contains(context);
return MaterialApp(
theme: ThemeData(primaryColor: Colors.blue[600]),
home: Scaffold(
appBar: AppBar(title: Text('Quotes')),
body: ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
),
Container(
height: 50,
color: Colors.blue[200],
child: const Center(
child: Text(
'You only live once, but if you do it right, once is enough.')),
)
],
)));
}
}
I am very poor at Dart ,And just starting
Here is the Scrrenshot of the app
I want to add like icon on the left for each of the quotes that will toggle the Favorite on and off
The issue is the animation can't be displayed but only image can be shown. There is only part of code about BottomAnimeLoader right here. So please help me figure what's happen why only the static image is right here. (using flutter framework and dart language)
the animation is static
import 'package:flare_flutter/flare_actor.dart';
import 'package:flutter/material.dart';
class BottomAnimeLoader extends StatefulWidget {
#override
_BottomAnimeLoaderState createState() => _BottomAnimeLoaderState();
}
class _BottomAnimeLoaderState extends State<BottomAnimeLoader> {
String _animationName = "new";
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: FlareActor(
"assets/flr/success.flr",
fit: BoxFit.contain,
alignment: Alignment.center,
animation: _animationName,
))
],
),
);
}
}
I use the official example's flr file to simulate this case because I do not have your flr file
If you have wrong _animationName name, then it will become static image
In official example, the _animationName is idle, if I change it to new it will become static image
Please correct your _animationName, for example the following https://rive.app/a/pollux/files/flare/success-check _animationName is Untitled
working demo
full test code
import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';
class BottomAnimeLoader extends StatefulWidget {
#override
_BottomAnimeLoaderState createState() => _BottomAnimeLoaderState();
}
class _BottomAnimeLoaderState extends State<BottomAnimeLoader> {
String _animationName = "success";
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: FlareActor(
"assets/flr/success.flr",
fit: BoxFit.contain,
alignment: Alignment.center,
animation: _animationName,
))
],
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: BottomAnimeLoader(),
);
}
}
i am trying to go on another page using navigation, but i am getting error;
Navigator operation requested with a context that does not include a
Navigator.
i am just trying to move on next page, i followed flutter documentations for this stateless widget but how to do with state full widget.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
State createState() => new MyApp1();
}
class MyApp1 extends State<MyApp> {
List<Widget> _listSection = [];
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Share IDEASS',
initialRoute: '/',
routes: {
'/second': (context) => SecondScreen(),
},
home: Scaffold(
appBar: AppBar(
title: Text('IDEAS'),
),
body: Container(
child: Stack(
children: [
floatingButton(),
],
),
),
),
);
}
Widget floatingButton() {
return Container(
padding: const EdgeInsets.all(30),
alignment: Alignment.bottomRight,
child: FloatingActionButton(
onPressed: () {
Navigator.pushNamed(context, "/SecondScreen");
},
child: Text("+"),
backgroundColor: Colors.blue,
),
);
}
}
class SecondScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}
You should use the named route you created.
Widget floatingButton(BuildContext context) { // added context as a parameter
return Container(
padding: const EdgeInsets.all(30),
alignment: Alignment.bottomRight,
child: FloatingActionButton(
onPressed: () {
Navigator.pushNamed(context, "/second"); // Changed this to use the named route
},
child: Text("+"),
backgroundColor: Colors.blue,
),
);
}
}
then use the following
body: Container(
child: Stack(
children: [
floatingButton(context),
],
),
),
The situation here is that the floatingButton() uses a context with the navigator to push the given page route. But the context used is provided in the parent Widget(MaterialApp) it self, which doesn't include a Navigator, hence the error.
So, Try this approach:
Separate the Home widget from the MaterialApp, like below:
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Share IDEASS',
initialRoute: '/',
routes: {
'/second': (context) => SecondScreen(),
},
home: HomePage(),
);
Create a stateless widget containing the Scaffold:
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('IDEAS'),
),
body: Container(
child: Stack(
children: [
floatingButton(),
],
),
),
);
}
}
Hope it helps. Let me know if this doesn't work.
You have made two mistakes because of which your code is not working:
You have used wrong route name. Replace /SecondScreen with /second
You have used wrong context. You can get Navigator only if your widget has MaterialApp as it's parent and here you are using context of MyApp1 so it is not working.
Following is a working code for your reference.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
State createState() => new MyApp1();
}
class MyApp1 extends State<MyApp> {
List<Widget> _listSection = [];
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Share IDEASS',
initialRoute: '/',
routes: {
'/second': (context) => SecondScreen(),
},
home: AppContent(),
);
}
}
class AppContent extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('IDEAS'),
),
body: Container(
child: Stack(
children: [
floatingButton(context),
],
),
),
);
}
Widget floatingButton(BuildContext context) {
return Container(
padding: const EdgeInsets.all(30),
alignment: Alignment.bottomRight,
child: FloatingActionButton(
onPressed: () {
Navigator.pushNamed(context, "/second");
},
child: Text("+"),
backgroundColor: Colors.blue,
),
);
}
}
class SecondScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}