Using FontAwesomeIcons with value from custom class in Flutter - flutter

I'm trying to use fontawesome together with flutter. Depending on certain content of an Item I'd like to display a certain Icon from fontawesome.
Transaction(id: 1, title: 'lunch', amount: -23.10, type:'utensils'),
Transaction(id: 2, title: 'new shows', amount: -59.99, type:'tshirt'),
Transaction(id: 3, title: 'Falcon launch', amount: -62000000, type:'rocket')
so, I'd like to use the type as an indicator for my fontawesome icon.
When using FontAwesomeIcons.rocket, everything works quite well.
Column(children: <Widget>[
Card(
child: IconButton(
onPressed: null,
icon: new Icon(FontAwesomeIcons.rocket),
),
elevation: 0,
)
],),
since I'm using the map function I'm able to call the type itself without an issue like Text(tx.type). Is there a way to replace the static (in my case) rocket with the type from my transaction class? I'm trying to avoid if/switch cases at the moment just to get the basics going.
Any help very appreciated.

You can copy paste run full code below
You can use https://pub.dev/packages/icons_helper
just prefix rocket with fa.rocket
code snippet
Icon(getIconUsingPrefix(name: 'fa.rocket'),
color: Theme.of(context).backgroundColor, size: 60.0),
working demo
full code
import 'package:flutter/material.dart';
import 'package:icons_helper/icons_helper.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 + Icon Helper 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> {
int _counter = 0;
Map iconMap = {"a":'fa.rocket'};
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(getIconUsingPrefix(name: 'fa.fiveHundredPx'),
color: Theme.of(context).backgroundColor, size: 60.0),
Icon(getIconUsingPrefix(name: 'fa.rocket'),
color: Theme.of(context).backgroundColor, size: 60.0),
Icon(getIconUsingPrefix(name: iconMap["a"]),
color: Theme.of(context).backgroundColor, size: 60.0),
Text(
'There should be an icon above. It\'s neat, isn\'t?\n\nYou can also push the + button and increment this counter for fun:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

Related

How to Fix problem child is'nt defined in drawer flutter

class Drawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
UserAccountsDrawerHeader(
accountName: Text("Anus"),
accountEmail: Text("Anus#gmail.com"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
"https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1158&q=80"),
),
),
ListTile(
leading: Icon(Icons.person),
title: Text("Account"),
subtitle: Text("Personal"),
trailing: Icon(Icons.edit),
),
ListTile(
leading: Icon(Icons.email),
title: Text("Email"),
subtitle: Text("anus#gmail.com"),
trailing: Icon(Icons.send),
),
],
),
);
}
}
How To Fix this Problem In flutter
I Want to Create Drawer but when i try to make drawer in new file for drawer The named parameter 'child' isn't defined.
You used same Widget at definition of that widget.
Here is a working code.
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,
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
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return Drawer();
}
}
class Drawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ListView(
padding: EdgeInsets.zero,
children: [
UserAccountsDrawerHeader(
accountName: Text("Anus"),
accountEmail: Text("Anus#gmail.com"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
"https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1158&q=80"),
),
),
ListTile(
leading: Icon(Icons.person),
title: Text("Account"),
subtitle: Text("Personal"),
trailing: Icon(Icons.edit),
),
ListTile(
leading: Icon(Icons.email),
title: Text("Email"),
subtitle: Text("anus#gmail.com"),
trailing: Icon(Icons.send),
),
],
);
}
}
your issue stems from the fact that you used the Name Drawer for the class (your custom widget), which means that the compiler won't know which Drawer widget to use, either the Drawer from the material library or the Drawer that you just defined.
to fix this issue just change the name of the class to AppDrawer or any other name and the compiler will start recognizing that you're trying to use the Drawer defined in the material library.

I need hashtag sign in url launcher TEL, but it gets removed automatically

i want to dial this number as it is, in flutter url launcher but it removes the hashtag sign in the last bit of the String,
onTap: () {
String no = '*477*4*1#';
launch('tel:$no');
},
You can copy paste run full code below
You can use Uri.encodeComponent('*477*4*1#');
code snippet
onPressed: () {
String no = Uri.encodeComponent('*477*4*1#');
launch('tel:$no');
},
working demo
full code
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.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> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('click'),
onPressed: () {
String no = Uri.encodeComponent('*477*4*1#');
launch('tel:$no');
},
),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
You need to use URL Encoding for special character so # is equals to \%23.

How to create custom InlineSpans in Flutter?

How can I reuse pieces of code of InlineSpan type (e.g. TextSpan, WidgetSpan).
For example,
Text.rich(
TextSpan(
children: [
WidgetSpan(...), // code I like to reuse
... // other stuff
],
),
)
Of course I can write a function, that gives me this InlineSpan, like this:
InlineSpan myCustomWidgetSpan() {
return WidgetSpan(...);
}
This is technically ok, but usually I reuse parts of code by creating a class that extends some other Flutter class (like StatelessWidget or StatefulWidget).
I think that there should be some more idiomatic approach to this. So what are the best practices for reusing code that produces InlineSpan?
You can copy paste run full code below
You can use package https://pub.dev/packages/span_builder
code snippet
final spans = SpanBuilder("The quick brown fox")
.apply(TextSpan(text: "brown", style: TextStyle(fontWeight: FontWeight.bold)))
.apply(TextSpan(text: "🦊"), whereText: "fox")
.build();
Text.rich(
TextSpan(
children: spans
),
),
working demo
full code
import 'package:flutter/material.dart';
import 'package:span_builder/span_builder.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> {
int _counter = 0;
final spans = SpanBuilder("The quick brown fox")
.apply(TextSpan(text: "brown", style: TextStyle(fontWeight: FontWeight.bold)))
.apply(TextSpan(text: "🦊"), whereText: "fox")
.build();
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text.rich(
TextSpan(
children: spans
),
),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

Flutter Web: How to fix SelectableText alignment?

I have a SelectableText and Icon inside a Row, but SelectableText does not seem to be properly aligned.
Right now it looks like this,
Expected Result:
This is code I am using,
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Icon(FontAwesomeIcons.whatsapp),
const Padding(padding: EdgeInsets.only(left: 8)),
SelectableText(
'+91-8**2**8**5',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.title,
)
],
),
PS: It works well with Text but I want SelectableText instead.
Issue Selectabletext widget on web is cutted on half
https://github.com/flutter/flutter/issues/40663 has been solved.
please upgrade to latest version
attached my full test code and result
full test code
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.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> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Icon(FontAwesomeIcons.whatsapp),
const Padding(padding: EdgeInsets.only(left: 8)),
SelectableText(
'+91-8**2**8**5',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.title,
)
],
),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

Style clipboard in flutter

I am looking for a way to style the clipboard actions without touching textTheme/button property of the main style theme. Is this even possible?
Seems like the style is directly tied to the theme. Not the best idea but if you really wanted to you would need to create a custom popup and handle all the actions yourself.
This should get you started...
Output:
Code:
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> {
final _controller = new TextEditingController();
final _textfieldFocusNode = new FocusNode();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(20.0),
child: GestureDetector(
// intercept all pointer calls
behavior: HitTestBehavior.opaque,
onTap: () {
FocusScope.of(context).requestFocus(_textfieldFocusNode);
},
onLongPress: () {
showMenu(
context: context,
// TODO: Position dynamically based on cursor or textfield
position: RelativeRect.fromLTRB(0.0, 300.0, 300.0, 0.0),
items: [
PopupMenuItem(
child: Row(
children: <Widget>[
// TODO: Dynamic items / handle click
PopupMenuItem(
child: Text(
"Paste",
style: Theme.of(context)
.textTheme
.body2
.copyWith(color: Colors.red),
),
),
PopupMenuItem(
child: Text("Select All"),
),
],
),
),
],
);
},
child: IgnorePointer(
// ensures textfield doesn't overrule GestureDetector
child: TextField(
focusNode: _textfieldFocusNode,
controller: _controller,
),
),
),
)
],
),
),
);
}
}