I want to display a paragraph in HTML that has various bold text and links within the tag using flutter on a desktop platform. I've come across "flutter_html", but the only supported platforms are for iOS and Android. Is there any other library that could display HTML text in a desktop environment? If there are none, are there any other ways to make this possible?
You can use flutter_html in desktop app.
Try my code below:
import 'package:html/dom.dart' as dom;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:html/parser.dart' show parse;
import 'package:flutter_html/flutter_html.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.yellow,
),
home: const HomePage(title: 'This Is Desktop'),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
HomePageState createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
#override
void initState() {
parseHtml();
super.initState();
}
Future<dom.Document> parseHtml() async {
return parse(await rootBundle.loadString('static/index.html'));
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: FutureBuilder<dom.Document>(
future: parseHtml(),
builder:
(BuildContext context, AsyncSnapshot<dom.Document> snapshot) {
if (snapshot.hasData) {
return Html(data: snapshot.data?.outerHtml);
} else {
return const Center(
child: Text("Loading"),
);
}
}),
);
}
}
However, some tag has no effect. For example img tag not showing image, a tag only have link style but won't open a browser to a link when you click on it.
And some of css styles are not support, like flex.
Related
I want to develop a more advanced version of the ListView widget as a package. This is my first package.
I wrote a code like this:
modern_card_listview.dart:
library modern_card_listview;
import 'package:flutter/material.dart';
class CardListView extends StatefulWidget {
List items;
CardListView({Key? key, required this.items}) : super(key: key);
#override
State<CardListView> createState() => _CardListViewState();
}
class _CardListViewState extends State<CardListView> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView.builder(
itemCount: widget.items.length,
itemBuilder: ((context, index) {
return Card(
child: ListTile(
title: widget.items[index],
),
);
}),
),
),
);
}
}
I guess I need to use the dart file in the test folder to test the code.
modern_card_listview_test.dart:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:modern_card_listview/modern_card_listview.dart';
CardListView _listView = CardListView(
items: const ["Bu bir", "Bu iki", "Bu uc", "Bu dort", "Bu bes"]);
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: _listView,
),
);
}
}
How can I try the package I wrote? When I ran the code above, No tests were found. I get an error.This is my first pack and I'm still new. I would be grateful if you help.
I couldn't find a solution
I have made a new file in my views folder but whenever I turn on the emulator and run the code, it just says "Hello World".
Is there a way I can set the starting point of the project to be on this new file? Because it only seems to turn on the main.dart file.
This is the code that is in the views file called home_page.dart . It is supposed to just say "Hi" 10 times.
import 'package:flutter/material.dart';
import '../models/post.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<Post>? posts;
var isLoaded = false;
#override
void initState() {
super.initState();
//fetch data from API
getData();
}
getData() async {
// posts = await
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Posts'),
),
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Container(
child: Text('Hi'),
);
},
)
);
}
}
in flutter the main.dart file is the first file
import 'package:flutter/material.dart';
import 'package:get/get_navigation/src/root/get_material_app.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: 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'),//add your home page here
);
}
}
Image picker is not working after installing google maps in my flutter app.
It picks it's images from gallery but doesn't return anything from the pickimage and pickmultiimage function in simulator but works fine on the emulator.
I am using the latest version of image picker 0.8.6 and google maps 2.2.1.
Here is the code...
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.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: 'Image picker with google maps!!!!'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final ImagePicker _picker = ImagePicker();
void pickImage() async {
final List<XFile> images = await _picker.pickMultiImage();
print(images);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: [
Center(
child: ElevatedButton(
onPressed: () {
pickImage();
},
child: const Text('pick image')),
)
],
),
);
}
}
i tried to check which platform that the app been used in flutter. followed this kIsWeb reference for checking it. this is the code that i used
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class ResponsiveLayout extends StatelessWidget {
final Widget mobileScreenLayout;
final Widget webScreenLayout;
const ResponsiveLayout({
Key? key,
required this.mobileScreenLayout,
required this.webScreenLayout,
}) : super(key: key);
#override
Widget build(BuildContext context) {
if (kIsWeb) {
//WEB SCREEN
return webScreenLayout;
}
//MOBILE SCREEN
return mobileScreenLayout;
}
}
the result was backward. when i run it on web it gave me the mobileScreenLayout and when i run it on emulator it gave me the webScreenLayout. tried to swap both webScreenLayout with the mobileScreenLayout and they work how supposedly with what i want. is there any problem with that or it's ok?
this the link i saw the kIsWeb
https://stackoverflow.com/a/57965689/18627424
Please check mobileScreenLayout and webScreenLayout. I think you added wrong text in these widgets by mistake. kIsWeb will definitely show web when you run it in web. You can also try
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Text(
(kIsWeb)?'Hello World Web!':"hello world mobile",
style: Theme.of(context).textTheme.headline4,
);
}
}
My App is a Flutter WEB app.
This is the plugin I am using to display some HTML coming from the server:
https://pub.dev/packages/web_browser
Here is the code I am using:
WebBrowser(
initialUrl: 'https://${Provider.of<CP>(context).getPaymentURL()+Provider.of<CP>(context).getPaymentPATH()}?O=${Provider.of<CP>(context).getOrder().orderUID}&Ro=${Provider.of<CP>(context).getOrder().res_key}',
),
My screen looks like below:
I would like to rid of the address bar and bottom bar but not sure how. Can someone help please?
You can copy paste run full code below
You can use attribute interactionSettings and set WebBrowserInteractionSettings's topBar and bottomBar to SizedBox.shrink()
code snippet
return WebBrowser(
initialUrl: 'https://dart.dev/',
interactionSettings: WebBrowserInteractionSettings(
topBar: SizedBox.shrink(), bottomBar: SizedBox.shrink()));
working demo
full code
import 'package:flutter/material.dart';
import 'package:web_browser/web_browser.dart';
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return WebBrowser(
initialUrl: 'https://dart.dev/',
interactionSettings: WebBrowserInteractionSettings(
topBar: SizedBox.shrink(), bottomBar: SizedBox.shrink()));
}
}
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(),
);
}
}
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 SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("Demo"),
),
body: MyWidget()),
);
}
}