Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I tried to implement shimmer effect in flutter web using plug in https://pub.dev/packages/shimmer.
But it is throwing following error.
The following UnimplementedError was thrown during a scheduler callback:
UnimplementedError
When the exception was thrown, this was the stack:
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 214:49 throw_
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/surface/scene_builder.dart 234:5 pushShader
Is it possible to implement shimmer effect in flutter web using this plug in?
Sample Code which works on mobile but throws error on web.
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
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: 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),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 200.0,
height: 100.0,
child: Shimmer.fromColors(
baseColor: Colors.red,
highlightColor: Colors.yellow,
child: Text(
'Shimmer',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
);
}
}
Mobile Screen
Error on Web
Related
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?
Why am I unable to add an Image here? I am getting this error while adding an Image to Column Widget in Flutter. When I am removing the new keyword, I am getting another error. Please check into this issue . I have made a folder named assets>images>girl-icon.jpg . Also, I have enabled assets from pubspec.yaml file.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'My First Flutter App',
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
),
home: const WelcomeScreen());
}
}
class WelcomeScreen extends StatelessWidget {
const WelcomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Page'),
backgroundColor: Colors.amber,
),
body:Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget> [
Text("Login",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
)),
new Image.asset("assets/images/girl-icon.jpg"),
],
),
heightFactor: 30,
),
);
}}
See screenshot of the problem here
const requires a hard coded constant value and you have called MyApp as constant while it's dynamically being build that is why it's throwing an error. Remove const before MyApp to solve this issue :
void main() {
runApp(MyApp());
}
and also from here :
children: <Widget> [
Text("Login",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
)),
new Image.asset("assets/images/girl-icon.jpg"),
]
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'My First Flutter App',
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
),
home: const WelcomeScreen());
}
}
class WelcomeScreen extends StatelessWidget {
const WelcomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Page'),
backgroundColor: Colors.amber,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Login",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
)),
Image.asset("assets/images/girl-icon.jpg"),
],
),
heightFactor: 30,
),
);
}
}
my way is just to remove the
const <Widget>
I'm building a news app using flutter, the app has 2 theme modes already dark and light debends on phone settings and works really great, but I need on some screens on my app to be dark whatever such as videos section or video page ...etc
I googled this and all the results about the normal theming which I did already.
I don't think there's any code I can put here to help, but if there please let me know!
You can override the current theme at any time simply by placing the desired widget in a Theme class.
I don't know if you are using Scaffold or not, but let's say you are then all you would need to do is:
// declare theme data if you don't have it already
final ThemeData specialThemeData = ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.yellow[700],
// and so on...
);
#override
Widget build(BuildContext context) {
// this the point of interest, return a Theme with desired Theme Data
return Theme(
data: specialThemeData,
child: Scaffold(
//...
It doesn't have to be Scaffold, it will work on any widegt.
Here is a fully functional example you can try out yourself:
import 'package:flutter/material.dart';
final ThemeData specialThemeData = ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.yellow[700],
accentColor: Colors.orange[500],
textTheme: TextTheme(
headline1: TextStyle(fontSize: 48.0, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 24.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 18.0),
),
);
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Home Page default theme'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _goToSpecialPage() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MySpecialPage()
)
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Your homepage, using default theme.',),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _goToSpecialPage,
tooltip: 'Go to special page',
child: Icon(Icons.navigate_next),
),
);
}
}
class MySpecialPage extends StatefulWidget {
MySpecialPage({Key key}) : super(key: key);
#override
_MySpecialPageState createState() => _MySpecialPageState();
}
class _MySpecialPageState extends State<MySpecialPage> {
void _backToHomePage(){
Navigator.pop(context);
}
#override
Widget build(BuildContext context) {
// this the point of interest, return a Theme with desired Theme Data
return Theme(
data: specialThemeData,
child: Scaffold(
appBar: AppBar(
title: Text('Special theme page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Your special page that uses a different theme.',),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _backToHomePage,
tooltip: 'Go back to home page',
child: Icon(Icons.navigate_before),
),
),
);
}
}
Currently I've got a problem with the dark mode for iOS in Flutter. I'm using a CupertinoApp with a CupertinoTheme.
With CupertinoDynamicColor.withBrightness() it's possible to define colors for dark and light theme. This is working for example for the navigation bar (barBackgroundColor), but not for the textTheme.
Someone already ask a similar question in the flutter repository but I don't know how to do this with a theme. Maybe you can help me there.
Example code:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return CupertinoApp(
title: 'Flutter Demo',
theme: CupertinoThemeData(
barBackgroundColor: const CupertinoDynamicColor.withBrightness(
color: Colors.blue,
darkColor: Colors.red,
),
textTheme: CupertinoTextThemeData(
textStyle: TextStyle(
color: const CupertinoDynamicColor.withBrightness(
color: Colors.blue,
darkColor: Colors.red,
),
),
),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(middle: Text('Test')),
child: Text('Test Text'),
);
}
}
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.