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(),
);
}
}
Related
Is it possible to have double extends in a single class? in my case, i have class class AddCreditsState extends State<AddCredits> i just want to extends the HookWidget in my class AddCreditsState extends State<AddCredits>,
class AddCreditsState extends State<AddCredits>{ // how do i insert the `HookWidget` here?
return Scaffold(
backgroundColor: Color.fromRGBO(10, 15, 39, 1),
body: SingleChildScrollView(
child: Container(
width: globals.screenWidth,
height: globals.screenHeight,
margin: EdgeInsets.only(top: 25),
child: Column(
children: [headercol, body],
)),
),
);
}
In Dart, you can implements multiple interfaces, but Dart only supports single inheritance. So, you can not extends from multiple classes.
You can though use multiple Mixins with with.
But in this particular case, what you probably want is a StatefulHookWidget, a StatefulWidget that can use hooks inside its build method.
Full source code
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'StatefulHookWidget Example',
home: HomePage(),
),
);
}
class HomePage extends StatefulHookWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String _state = 'Hello';
#override
Widget build(BuildContext context) {
final _hookedVar = useState('Hello');
return Scaffold(
appBar: AppBar(title: Text('StatefulHookWidget Example')),
body: Container(
padding: EdgeInsets.all(16.0),
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('STATE: $_state'),
const SizedBox(height: 16.0),
Text('HOOK: ${_hookedVar.value}'),
const SizedBox(height: 16.0),
ElevatedButton(
onPressed: () {
setState(() => _state = 'Goodbye');
_hookedVar.value = 'Goodbye';
},
child: Text('CLICK ME'),
)
],
),
),
);
}
}
Is it possible to have double extends in a single class? in my case, i have class class AddCreditsState extends State<AddCredits> i just want to extends the HookWidget in my class AddCreditsState extends State<AddCredits>,
class AddCreditsState extends State<AddCredits>{ // how do i insert the `HookWidget` here?
return Scaffold(
backgroundColor: Color.fromRGBO(10, 15, 39, 1),
body: SingleChildScrollView(
child: Container(
width: globals.screenWidth,
height: globals.screenHeight,
margin: EdgeInsets.only(top: 25),
child: Column(
children: [headercol, body],
)),
),
);
}
In Dart, you can implements multiple interfaces, but Dart only supports single inheritance. So, you can not extends from multiple classes.
You can though use multiple Mixins with with.
But in this particular case, what you probably want is a StatefulHookWidget, a StatefulWidget that can use hooks inside its build method.
Full source code
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'StatefulHookWidget Example',
home: HomePage(),
),
);
}
class HomePage extends StatefulHookWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String _state = 'Hello';
#override
Widget build(BuildContext context) {
final _hookedVar = useState('Hello');
return Scaffold(
appBar: AppBar(title: Text('StatefulHookWidget Example')),
body: Container(
padding: EdgeInsets.all(16.0),
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('STATE: $_state'),
const SizedBox(height: 16.0),
Text('HOOK: ${_hookedVar.value}'),
const SizedBox(height: 16.0),
ElevatedButton(
onPressed: () {
setState(() => _state = 'Goodbye');
_hookedVar.value = 'Goodbye';
},
child: Text('CLICK ME'),
)
],
),
),
);
}
}
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)),
],
),
],
));
}
}
I am trying to align the "Book Now" text and the add to cart icon to the righthand side of the screen. I have tried adding text alignment property also tried with Expanded/Column. It doesn't get aligned to the right side of the screen. Any hints to fix this? Thanks
Sample code and screenshot below tried in - https://www.dartpad.dev/flutter
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
InkWell(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.add_shopping_cart),
Text('Book Now', textAlign: TextAlign.right),
],
),
)
],
);
}
}
You want it aligned on the right?
Use mainAxisAlignment: MainAxisAlignment.end on your first row.
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
InkWell(
child: Row(
children: <Widget>[
Icon(Icons.add_shopping_cart),
Text('Book Now', textAlign: TextAlign.right),
],
),
)
],
);
}
}
try this:
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: MyWidget(),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.centerRight,
child: InkWell(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.add_shopping_cart),
Text('Book Now', textAlign: TextAlign.right),
],
),
),
);
}
}
I am trying to design a WhatsApp-like menu from BottomNavigationBar for one of my applications which is written in flutter.
I have tried designing with PopupMenuButton class but it will cover the BottomNavigation also.
I need a popup like menu which is above the BottomNavigationBar something like below
the PopupMenuButton opens up a menu just above the button so it blocked the bottom bar. I found a workaround, instead of using PopupMenuButton, try using a BottomAppBar with the IconButton as one of the children, then use showBottomSheetso it won't block the BottomAppBar.
Note: Most of my codes are just placeholders to mimic the layout of your image, you need to rewrite most of them to match your needs. The key is using showBottomSheet for your problem.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 70,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.home),
Icon(Icons.alarm),
MyMiddleIcon(),
Icon(Icons.album),
Icon(Icons.assignment_ind),
],
),
),
shape: CircularNotchedRectangle(),
color: Colors.blueGrey[50],
),
);
}
}
class MyMiddleIcon extends StatelessWidget {
#override
Widget build(BuildContext context) {
return IconButton(
icon: Icon(Icons.add),
onPressed: () {
showBottomSheet(
context: context,
builder: (context) => Container(
color: Colors.red[100],
height: 250,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.home),
Icon(Icons.hot_tub),
Icon(Icons.hourglass_empty),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.home),
Icon(Icons.hot_tub),
Icon(Icons.hourglass_empty),
],
),
],
),
));
});
}
}