I was trying to create a simple web page on Flutter Web (dev channel - v1.13.2) and this weird issue occured. When I tried to place a Flare animation in stack widget which have 2 additional widget, a background and a centered text respectively, the Flare didn't seems to appear. But when I remove the background container, flare works and positioned perfectly. Here is the code;
import 'package:flutter/material.dart';
import "package:flare_flutter/flare_actor.dart";
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
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 new Scaffold(
body: new Stack(
children: <Widget>[
new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('images/bckg.jpeg'),
fit: BoxFit.cover)),
),
new Center(
child: new Text('TEST',
style: new TextStyle(
color: Colors.white,
fontSize: 200.0,
fontWeight: FontWeight.bold,
letterSpacing: 5.0)),
),
new Align(
alignment: Alignment.bottomCenter,
child: new ConstrainedBox(
constraints: new BoxConstraints(
maxHeight: 100,
maxWidth: 100,
),
child: new FlareActor("images/arrowdown.flr",
color: Colors.white,
alignment: Alignment.center,
fit: BoxFit.contain,
animation: "idle"),
),
)
],
),
);
}
}
I think you're seeing this bug. See if the RepaintBoundary workaround works for you in the meantime.
Related
I have code like this
ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(100.0)),
child: Image.network(
image_link_from_api,
width: 100,
height: 100,
fit: BoxFit.fill,
),
),
I tried ClipRRect, avatar image, container with rounded corners, nothing seems to work, so how can I fill whole round image instead of something like this in above image?
I tried fill, cover, contain, every possible option
The effect of running your code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(100.0)),
child: Image.network(
'https://i.ibb.co/37ZfCpQ/20230113213218image-thumbnail-media-433.jpg',
width: 100,
height: 100,
fit: BoxFit.fill,
),
),
],
),
),
);
}
}
I'm using the webview plugin to show a graph in my app. The sample code works fine and it displays the website with the graph I want to show. I want it to be automatically zoomed in for me to be able to read it better, and also because I'm adding multiple graphs in one page. The website only has one component (the graph) and nothing else (no headers or anything else) so I figured I can't use javascript methods where I can program my app not to show specific parts of the webpage.
Here is my current code:
import 'package:flutter/material.dart';
import 'package:webview_flutter/platform_interface.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFFCFCFC),
appBar: AppBar(
centerTitle: true,
title: const Text('test',
style: TextStyle(
fontSize: 28.0,
fontWeight: FontWeight.bold,
letterSpacing: 2.5,
),
),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
/*Container(
height: 90,
width: 90,
color: Colors.red,
),*/
Container(
height: 150,
child: WebView(
initialUrl: 'https://thingspeak.com/channels/1864145/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&title=Carbon+Dioxide+Concentrations&type=line',
javascriptMode: JavascriptMode.unrestricted,),
color: Colors.blue,
),
],
),
),
);
}
}
I was wondering if there's a method where I can automatically zoom the website. If not, are there other plugins that support this?
When the app opens up, I want the logo and app name to pop up, and pause it for a few seconds before redirecting to the next directory. Can anyone please help me because I'm new to flutter and have been stuck for awhile >_<
import 'package:flutter/material.dart';
class wlcPage extends StatelessWidget {
const wlcPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('images/appBckgrd.jpg'),
fit: BoxFit.cover
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircleAvatar(
radius: 80,
backgroundImage: AssetImage("images/logo.png"),
),
Text('signhouse',
style: TextStyle(
fontFamily: 'OpenSans',
fontSize: 30,
fontWeight: FontWeight.normal,
letterSpacing: 1,
color: Colors.teal[700],
),
),
],
),
),
),
);
}
}
You can use the Future.delayed function to your advantage and make it wait for a couple of seconds and then use the Navigator.push() to show your other page.
Please try below plugin to display logo and different style of text when app opens up. The duration property sets delay between the splash screen and target screen. Provider Duration in millisecond.
splash_screen_view: ^3.0.0
You can also try below code (without use of plugin) example with Timer to pause the screen for sometime
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Splash Screen',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
super.initState();
Timer(Duration(seconds: 3),
()=>Navigator.pushReplacement(context,
MaterialPageRoute(builder:
(context) =>
SecondScreen()
)
)
);
}
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child:FlutterLogo(size:MediaQuery.of(context).size.height)
);
}
}
class SecondScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text("Data")),
body: Center(
child:Text("Home page",textScaleFactor: 2,)
),
);
}
}
I have a ListView consisting of several Cards how can I make it so that when the application starts, the order of these Cards in the ListView is random?
You can put all your elements you want to display in one list (if they are not already in a list) before generating the Cards and use the "shuffle" function:
https://api.flutter.dev/flutter/dart-core/List/shuffle.html
Random cards
I built a full working example for you:
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: '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> {
var imageNames = ["screen.png", "screen1.png", "screen2.png", "screen3.png", "screen4.png", "another_image.png"]; // you don't need to store the whole path
#override
void initState() {
imageNames.shuffle(); // shuffle your list of images
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView(
padding: EdgeInsets.all(16),
children: [
for (String imageName in imageNames) // iterate over your list
buildImageCard('assets/images/$imageName'),
]
)));
}
}
Widget buildImageCard(String imagePath) => Card( // from https://stackoverflow.com/a/66893064/3161139
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Column(
children: [
Stack(
children: [
Ink.image(
image: AssetImage(imagePath),
height: 240,
fit: BoxFit.cover,
),
Positioned(
bottom: 30,
right: 16,
left: 16,
child: Text(
'Interesting fact!',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 24,
),
),
),
],
),
],
),
);
Animations created with Flare Flutter (from 2dimensions.com) cannot switch between different animations of the same Flare Actor. If a black version is first, the white version will not display; if the white version is first, the black will display.
I am not sure if I am doing something wrong or if it is a bug. It can switch between colors, just not animations.
import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';
const List<String> animations = ['White', 'Black'];
const List<Color> colors = [Colors.blue, Colors.black];
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Animation Tester',
debugShowCheckedModeBanner: false,
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Animation Tester'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int index = 0;
void switchAnimation() {
setState(() {
index = index < (animations.length - 1) ? index + 1 : 0;
});
}
#override
Widget build(BuildContext context) {
print(index);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView(
children: <Widget>[
GestureDetector(
onTap: switchAnimation,
child: Icon(
Icons.add,
size: 100.0,
)),
Container(
width: 200.0,
height: 200.0,
child: FlareActor(
'assets/color_wheel_loading.flr',
color: colors[index],
)),
Container(
width: 200.0,
height: 200.0,
child: FlareActor(
'assets/color_wheel_loading.flr',
animation: animations[index],
)),
Center(child: Text('$index'))
],
)),
);
}
}
I have tested your code with my own file, it works perfect. May be your animation names are not right, can you check.
Or you can test this file "https://www.2dimensions.com/a/whitewolfnegizzz/files/flare/pj" and using the code below.
import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';
const List<String> animations = ['Build and Fade Out', 'Build'];
const List<Color> colors = [Colors.blue, Colors.black];
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Animation Tester',
debugShowCheckedModeBanner: false,
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Animation Tester'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int index = 0;
void switchAnimation() {
setState(() {
index = index < (animations.length - 1) ? index + 1 : 0;
});
}
#override
Widget build(BuildContext context) {
print(index);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView(
children: <Widget>[
GestureDetector(
onTap: switchAnimation,
child: Icon(
Icons.add,
size: 100.0,
)),
Container(
width: 200.0,
height: 200.0,
child: FlareActor(
'assets/color_wheel_loading.flr',
color: colors[index],
)),
Container(
width: 200.0,
height: 200.0,
child: FlareActor(
'assets/Pj.flr',
animation: animations[index],
)),
Center(child: Text('$index'))
],
)),
);
}
}
From what i observed, Flare animation names are case sensitive. If the animation names in the flare project are in lowercase, the animation property of your flare actor should also be in lowercase.
Add flr in assets.
initialize it in Pubsepec.yaml file
then add dependency of flare animation in pubsepec.yaml file
after this,
just use this code in your main file
Container(
height: MediaQuery.of(context).size.height *0.8,
child: FlareActor(
'assets/oncemore.flr',
animation: 'Celebrate Duplicate', // Check this, when you are downloading flr file from Flare 2D dimension website
fit: BoxFit.contain,
),
),
After this , Your Flare animation will work perfectly.