I have faced the flutter tooltip problem
Here is my code:
import 'package:flutter/material.dart';
import 'dart:async';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
#override
_State createState() => _State();
}
class _State extends State<MyApp> {
String _value = 'Hello again';
void _onClicked() => setState(() => _value = new DateTime.now().toString());
#override
Widget build(BuildContext context) {
return Scaffold(
// key: _scaffoldstate,
appBar: AppBar(
title: Text('Name here'),
),
body: Container(
padding: EdgeInsets.all(32.0),
child: Center(
child: Column(
children: <Widget>[
Text(_value),
IconButton(
icon: Icon(Icons.timer),
onPressed: _onClicked,
tooltip: "Hi I'm tooltip", // way one
),
Tooltip(
// way two
message: 'I am a Tooltip',
child: Text('Hover over the text to show a tooltip.'),
)
],
),
),
),
);
}
}
I have tried two way but doesn't work in any way, I don't know where is a problem.
Is it a problem with my column widget?
flutter version: 2.0.3
any suggestion, please.
ToolTips gets visible when you hover on those Widgets. In a mobile phone, it's not possible to hover on widgets without a mouse so try long pressing on those widgets to view tooltips.
ToolTips are visible when hovering on those widgets on the web. Check this DartPad
Related
I've spent a lot of time trying to implement one thing, which is
a button that pops up in the center of a picture when the user's mouse enters the picture block, and when the mouse exits, button should disappear.
I've tried using many different widgets, such as InkWell and MouseArea but sadly didn't get expected behavior
Please share your thoughts if you know how to implement such behavior in flutter
Any help appreciated!
Instead of using AnimatedContainer, you could use AnimatedSwitcher which switches between a Button and a non-visible SizedBox whenever the onEnter or onExit event is called.
Just change the container to the picture you want to show.
Code example with DartPad:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool showButton = false;
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: const Text('Material App Bar'),
),
body: Center(
child: MouseRegion(
onEnter: (_) => setState(() {
showButton = true;
}),
onExit: (_) => setState(() {
showButton = false;
}),
child: Stack(
alignment: Alignment.center,
children: [
Container(
color: Colors.red[200],
width: 300,
height: 300,
),
AnimatedSwitcher(
duration: const Duration(milliseconds: 250),
child: showButton ? ElevatedButton(
onPressed: () => print("Hi!"),
child: const Text("Hello")
) : const SizedBox.shrink(),
)
],
),
),
),
),
);
}
}
i would like to know o can i change the value of a child widget in flutter if a certain condition is met, for example the color of an icon in the trailing
Here is some pseudo-code:
if(condition){
trailing Icon(Icons.favorite).color = Colors.red[500]
}else{
trailing = Icon(Icons.Favorite).color = Colors.blue[300]
}
Thank you.
you wanna something like this?
if yes, try this code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool colorIndex = true;
void _changeColor(val) {
setState(() {
this.colorIndex = val;
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_changeColor(!colorIndex);
},
child: Icon(Icons.touch_app),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(50.0),
child: Card(
child: ListTile(
title: Text('Click FAB to change color'),
trailing: Icon(
Icons.favorite,
color: colorIndex ? Colors.red[500] : Colors.blue[300],
),
),
),
),
),
),
);
}
}
You can change anything under any condition you define. The most simple example is using setState to update a value that can be inspected during build. This value could change under any condition you like. Calling setState will trigger the UI to rebuild (calls the build method).
Here is a Widget. It displays the text "Hello, World!" in the center of the screen. The AppBar at the top has a leading IconButton Widget. When the IconButton is pressed, it will toggle the color of the "Hello, World!" text. It does this by updating the state of Widget and toggling the value of the blue variable. The condition is: if (blue) {} or "if blue is equal to true then change the color." During the build of the UI, the code inspects the value of blue and determines what TextStyle to apply to the "Hello, World!" text.
import 'package:flutter/material.dart';
class ColorChangeWidget extends StatefulWidget {
#override
State<StatefulWidget> createState() => _ColorChangeWidgetState();
}
class _ColorChangeWidgetState extends State<ColorChangeWidget> {
bool blue = false;
#override
Widget build(BuildContext context) {
TextStyle style = TextStyle(color: Colors.black);
if (blue) {
style = TextStyle(color: Colors.blue);
}
return Scaffold(
appBar: AppBar(
title: Text("Test"),
centerTitle: true,
leading: IconButton(
icon: Icon(Icons.add),
onPressed: () {
setState(() {
blue = !blue;
});
},
),
),
body: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(8.0),
child: Text("Hello, World!", style: style)
)
);
}
}
Sorry for my bad English.
Problem
I'm currently developing an application for iPad with Flutter.
It is only used on iPad, not on iPhone or Android.
I want to always display the sidebar where Items are arranged like BottomNavigationBar, but when using Navigator.of.push, moving screen with the sidebar disappeared.
What do I want to do
I wanna make the transition with the sidebar still displayed as in Twitter for iPad or Settings app for iPad, but if anyone knows how to do it, please let me know.
App top screen
Select item1 and push button
How can i set ios back button only on right screen like Settings App for iPad like this image?
I wanna create a UI like a Setting app for iPad.
Code
lib/main.dart
import 'package:flutter/material.dart';
import 'package:health_check/ui/master_detail_container.dart';
void main() => runApp(MyAppScreen());
class MyAppScreen extends StatefulWidget {
#override
_MyAppScreenState createState() => _MyAppScreenState();
}
class _MyAppScreenState extends State<MyAppScreen> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MasterDetailContainer(),
);
}
}
lib/ui/master_detail_container.dart
import 'package:flutter/material.dart';
import 'package:health_check/ui/item.dart';
import 'package:health_check/ui/item_details.dart';
import 'package:health_check/ui/item_listing.dart';
class MasterDetailContainer extends StatefulWidget {
#override
_ItemMasterDetailContainerState createState() =>
_ItemMasterDetailContainerState();
}
class _ItemMasterDetailContainerState extends State<MasterDetailContainer> {
Item _selectedItem;
Widget _sideBar() {
return Flexible(
flex: 1,
child: Material(
elevation: 4.0,
child: ItemListing(
itemSelectedCallback: (item) {
setState(() {
_selectedItem = item;
});
},
selectedItem: _selectedItem,
),
),
);
}
Widget _itemContent() {
return Flexible(
flex: 3,
child: ItemDetails(
item: _selectedItem,
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
_sideBar(),
_itemContent(),
],
),
);
}
}
lib/ui/item_listing.dart
import 'package:flutter/material.dart';
import 'package:health_check/ui/item.dart';
import 'package:health_check/ui/item_details.dart';
class ItemListing extends StatelessWidget {
ItemListing({
#required this.itemSelectedCallback,
this.selectedItem,
});
final ValueChanged<Item> itemSelectedCallback;
final Item selectedItem;
#override
Widget build(BuildContext context) {
// return
return ListView(
children: items.map((item) {
return ListTile(
title: Text(item.title),
onTap: () => itemSelectedCallback(item),
selected: selectedItem == item,
);
}).toList(),
);
}
}
lib/ui/item_details.dart
import 'package:flutter/material.dart';
import 'package:health_check/ui/item.dart';
import 'package:health_check/ui/item1_screen.dart';
import 'package:meta/meta.dart';
class ItemDetails extends StatelessWidget {
ItemDetails({
#required this.item,
});
final Item item;
#override
Widget build(BuildContext context) {
final TextTheme textTheme = Theme.of(context).textTheme;
final Widget content = Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text("Button"),
color: Colors.orange,
textColor: Colors.white,
onPressed: () {
Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(builder: (context) => Item1Screen()));
},
),
Text(
item?.title ?? 'No item selected!',
style: textTheme.headline,
),
Text(
item?.subtitle ?? 'Please select one on the left.',
style: textTheme.subhead,
),
],
);
return Scaffold(
appBar: AppBar(
title: Text('Appbar'),
),
body: Center(child: content),
);
}
}
lib/ui/item1_screen.dart
import 'package:flutter/material.dart';
class Item1Screen extends StatelessWidget {
Item1Screen();
#override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('Item1 detail'),
),
body: Center()
);
}
}
lib/ui/item.dart
import 'package:meta/meta.dart';
class Item {
Item({
#required this.title,
#required this.subtitle,
});
final String title;
final String subtitle;
}
final List<Item> items = <Item>[
Item(
title: 'Item 1',
subtitle: 'This is the first item.',
),
Item(
title: 'Item 2',
subtitle: 'This is the second item.',
),
Item(
title: 'Item 3',
subtitle: 'This is the third item.',
),
];
I need to copy a value of a Text Widget and copy this to another.
I tried to this using keys, but I don't know how to acess the Text Widget in this case.
Is it possible to do in Flutter, using the onPressed property?
import 'package:flutter/material.dart';
class TextWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Value to be copied",
key: Key('text1')
),
RaisedButton(
onPressed: (){
// code here
},
child: Text("Copy value"),
),
SizedBox(height: 40),
Text(
"",
key: Key('text2')
)
],
),
),
);
}
}
Answering your question directly: you can access text inside Text widget using its data property.
Text widget = Text('text value');
String text = widget.data;
print(text); // text value
Next, you can't access widgets by their key properties. At least you shouldn't, because they were designed for different purpose: here's a video and an article about keys in Flutter.
What you can do here is turn your TextWidget from StatelessWidget into StatefulWidget and render contents of your second Text based on the state. Good introduction into what the state is and why you should use it can be found on official Flutter website: Start thinking declaratively.
Then you can save your first Text widget in a variable and then access its contents directly using data property update, then update state of the whole widget.
Example 1 on DartPad
More canonical and in general preferrable approach is to render contents of both buttons based on the state and get desired text from state variable and not from the widget itself, as proposed by Sebastian and MSARKrish.
Example 2 on DartPad
Note that you can't change data attribute of a Text widget imperatively, like you would do in JavaScript DOM API with innerText:
_textWidget.data = "New text"; // Doesn't work
because its data is final. In Flutter you have to think declaratively, and it worth it.
Try this
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
#override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
String _text = "Value to be copied";
bool _buttonToggle;
#override
void initState() {
super.initState();
_buttonToggle = false;
}
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(_text),
SizedBox(height: 40),
RaisedButton(
onPressed: _toggle,
child: Text("Copy value"),
),
Switch(
value: _buttonToggle,
onChanged: (_) => _toggle(),
),
SizedBox(height: 40),
Text(_buttonToggle ? _text : '')
],
);
}
void _toggle() {
setState(() => _buttonToggle = !_buttonToggle);
}
}
class TextWidget extends StatefulWidget {
#override
_TextWidgetState createState() => _TextWidgetState();
}
class _TextWidgetState extends State<TextWidget> {
String text1Value = "text to be copied";
String text2Value = "";
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
text1Value,
),
RaisedButton(
onPressed: () {
setState(() {
text2Value = text1Value;
});
},
child: Text("Copy value"),
),
SizedBox(height: 40),
Text(
text2Value,
)
],
),
),
);
}
}
I am working in an cart kind of application, where I need to show cart item counts. How to show item counts in Toolbar actions. I surfed lot couldn't find the solution.
You can simply add a button with image and text as Action to AppBar widget. Then whenever you adding the item, you need to update the text inside the Action. Here a working simple example:
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: "Sample",
home: new Home(),
));
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
// save the total of the item here.
int _total = 0;
#override
Widget build(BuildContext context) {
return new Scaffold(
// add the AppBar to the page
appBar: new AppBar(
actions: <Widget>[
// Add a FlatButton as an Action for the AppBar
FlatButton(
onPressed: () => {},
child: Row(
children: <Widget>[
Icon(Icons.shop),
Text("Total $_total")
],
),
)
],
),
floatingActionButton: new FloatingActionButton(
child: Icon(Icons.add),
onPressed: _increaseTotal,
tooltip: "Add",
),
);
}
// increase the total item whenever you click the FloatingActionBar
void _increaseTotal() {
setState(() {
_total++;
});
}
}