Hey guys I have a question. I tried to ad a new text widget in my code (just as always), but it is red underlined. I don´t know why. In my opinion everything is right. I copied the same text widget one line below and in that line it isn´t underlined. Can anybody say my what the reason therefore is? (I added a link in which you should find the part of the code.
This is the code
pic of the widgets
You have to add , after RaisedButton.
Column(
children: <Widget>[
RaisedButton(
child: Text("Button"),
onPressed: (){
},
), // <--- here
Text("Simple"),
Text("simple"),
],
),
It's underline because it's missing a comma before your Text Widget :
RaisedButton(
child: Text(startStopButtonDesign),
onPressed: () {
startOrStop();
},
), //Missing commma
Text(_time.toString()),
Related
I'm sorry that I have never see or used an actual device with android OS such as Google pixcel, but I found that gray-out area on top of screen like screen shot below.
*This is "Pixcel 4 API 30 mobile emulator" called from vsCode.
And I found this kind of dead area on Pixcel 5 emulator as well, but am not sure that this is somthing in common for all android OS.
Finally, I'd like to ask that if I should avoid something to display here or this is only emulator matters and do not have to care about this ?
In case that I have to care this area with developing by flutter, should I intentionally separate code or design between these kind of device and the others, as I'm usually using Iphone emulator and actual machine but have never seen this area and beleive I need not to care this kind of area and adopting top-margin for this problem.
Thanks for your helpful comment.
Code Added:
class holder extends ConsumerWidget {
#override
Widget build(BuildContext context, WidgetRef ref) {
ref.watch(_modalProvider );
return Scaffold(
body: Column(
children: [
Container(
margin: const EdgeInsets.only(bottom: 10),
// flex: 1,
child: Container(
margin: EdgeInsets.only(top: 40),//should I do this to avoid this area?
width: double.infinity,
height: 40,
// color: Colors.grey,
alignment: Alignment.topLeft,
child: Image.asset('images/flutter.png'),
),
),
Flexible(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Folders(
name: "list",
subTitle: null,
),
],
)
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
floatingActionButton: Container(
width: 50.0,
child: FloatingActionButton(
backgroundColor: Colors.white,
child: const Icon(
Icons.search_sharp,
color: MyStyle.mainColor,
),
onPressed: () {
ref.read(_modalProvider.notifier).update((state){
showTopModalSheet<String?>(context, DumyModal());
});
},
),
),
);
}
}
That area will be also visible in real devices so you should take that area into consideration. But Scaffold widget will start the rendering from below that point so you don't have to think about it.
İf you want to change color of that area, you can
Container(
decoration: BoxDecoration(color: Color.white),
child: SafeArea(
Scaffold:...
)
)
It also effects IOS and Android devices differently, I believe that is why it is only visible in some devices
I am new to flutter and I am developing an app in Flutter. While I am doing this, I try to add ElevatedButton which is the latest version of RaisedButton, and its return error and I am also not sure why. I will insert the error code image and would be grateful if someone tells me what is the reason for the error and how to solve it. Thank you
You need to add a child widget (it is required in addition to onPressed function). Here is a sample code for Elevated Button. You can adjust it based on your needs:
ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.white,
primary: Color(0xffccbbd7),
minimumSize: const Size(330,70),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
),
onPressed: () {},
child: const Text('click'),
),
You Forgot the child Widget inside ElevatedButton, in this button onPressed and child widgets are required
Refer ElevatedButton
Try below code
ElevatedButton(
onPressed: () {
// write your onPressed function here
print('Button Pressed');
},
child: const Text('Press Me'),
),
Your result screen->
Well, elevated button should have child inside. Can be text, icon or image
ElevatedButton(
onPressed: () {
print('Tombol baru saja ditekan!');
},
child: const Text('Hit me!'),
),
How to add whatsapp image in floating action button in flutter because whatsapp icon is not in flutter icon list. Tell me a simple method.
Row(
children: [
FloatingActionButton(
child: const Icon(Icons.chat),
backgroundColor: Colors.green.shade800,
onPressed: () {
String url =
"https://wa.me/+923045873730/?text=Hello";
launch(url);
},
),
],
),
Font Awesome has a flutter package that helps with most icons that are not in flutter default icon set, https://pub.dev/packages/font_awesome_flutter. It also includes all icons listed in font Awesome Offical website https://fontawesome.com/icons
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
Row(
children: [
FloatingActionButton(
child: FaIcon(FontAwesomeIcons.whatsapp),
backgroundColor: Colors.green.shade800,
onPressed: () {
String url =
"https://wa.me/+923045873730/?text=Hello";
launch(url);
},
),
],
),
The easiest way that comes to my mind is that downloading the icon image of Whatsapp (from flaticon or other website), adding it to the project's assets and adding it as a child( for example asset image).
In 'body', two 'child' cannot be in? just one allowed?
If it is, how can I add several widgets like in the picture? ex) ElevatedButton(), Column(children: ?
And there is a red underline below "Column(children: ".
Could someone tell me why this happened?
you need to do the following
body: Center(
child: Column(
children: [
ElevatedButton(child: ...)
Container(child: ....)
...
]
The problem is that I have a RichText inside a Scrollable Widget(SingleChildScrollView or ListView) and I need to Scroll to a specific TextSpan inside the RichText. Also, I cannot use ScrollablePositionedList because the texts should write in the end of the last one and if there was no space to continue the text should go to the next line so I have to use RichText.
Similar to
Sample Code:
ListView(
children:[
RichText(
children: AListOfTextSpansThatICreateWithIndexes(),
),
],
),
Sample Text That I want to show:
This is TextSpan1 and it is a bit
long. This is TextSpan2 and its ok.
Similar to Scrollable position of a TextSpan within a RichText
There is a way to make sure a key is visible on the screen using the Scrollable.ensureVisible method. (credits to the person who deleted their comment)
you should first generate keys for your list:
var keys = List.generate(LENGTH, (i) => GlobalKey());
Then use the keys behind each TextSpan:
Text.rich(
TextSpan(
children: Iterable.generate(LENGTH, (i) => i)
.expand((i) => [
WidgetSpan(
child: SizedBox.fromSize(
size: Size.zero,
key: keys[i],
),
),
TextSpan(
text: 'this is text number $i',
),
])
.toList(),
),
),
Finally, call this function(where there is access to the context) to scroll to the desired key:
Scrollable.ensureVisible(
keys[i].currentContext,
alignment: 0.2,
duration: Duration(milliseconds: 500),
),