Automatic zoom/set width on Flutter webview - flutter

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?

Related

FLUTTER: Divider() in Column inside a Row does not appear

I need to put a divider in a Column inside a Row but the divider does not appear. I saw some questions about the Row should not be used but in my case, I need the Row. Here is the simplest code, I need the divider to be shown
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: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: const [
Text('up'),
Divider(
color: Colors.black,
thickness: 2,
),
Text('bottom'),
],
),
],
),
),
);
}
}
To get the divider to show, you need to warp your Divider() with a SizedBox() and define a set width. As well as removing const form the Column() since we're using MediaQuery:
SizedBox(
width: MediaQuery.of(context).size.width,
child: Divider(
color: Colors.black,
thickness: 2,
),
),
Result:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp();
#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({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: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Text('up'),
SizedBox(
width: MediaQuery.of(context).size.width,
child: Divider(
color: Colors.black,
thickness: 2,
),
),
Text('bottom'),
],
),
],
),
),
);
}
}
While the structure is
Center
- Row
- Column
- Text
- Divider
- Text
This divider doesn't get any constrained and the result is invisible on UI.
Wrapping Divider with SizedBox provide the constraints, and we are able to see the divider. Also you can go for Expanded on Column widget.
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Column(
children: const [
Text('up'),
Divider(
color: Colors.green,
thickness: 2,
),
Text('bottom'),
],
),
),
],
),
),

How to pause the page in flutter before redirecting it

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,)
),
);
}
}

How to make a random order of Cards in the ListView in Flutter when launching the app?

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,
),
),
),
],
),
],
),
);

Flutter Web shimmer effect [closed]

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

Flutter How to force Dark mode on specific screens

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),
),
),
);
}
}