With web flutter my text is cut at the bottom when I display text I tried to put padding but it doesn't work.
this problem this product everywhere even on the TextField
new Container(
width: menuRightWidthDesktop,
height: getSize == 0 ? heightHeaderDesktop : getSize == 1 ? heightHeaderTablette : heightHeaderMobile,
color: Colors.red,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new GestureDetector(
child: new Container(
color: Colors.indigoAccent,
child: new Text("Surfeur >"),
),
onTap: () {},
),
new GestureDetector(
child: new Text("Photographe >", ),
onTap: () {},
),
],
),
),
I've been having the same issue and solved it by increasing the height property of the text by a small value
Text("Surfeur >",
style: TextStyle(
height: 1.1,
),
),
There is a new pull request https://github.com/flutter/engine/pull/13929
experimental implementation of text measurement that's based on Canvas2d
You can use the following command
flutter run -d web-server --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true
#madebyAyan's answer works for me. Moreover, I added this as a theme to avoid repeating parts in multiple places.
TextTheme _buildTextTheme(TextTheme base) {
return base.copyWith(
bodyText2: base.bodyText2?.copyWith(
height: 1.1,
),
);
}
use text property TextBaseline.ideographic :
Text("Surfeur >",
style: TextStyle(
textBaseline: TextBaseline.ideographic,
),
),
I had the same Problem in FireFox so I tried a few workarounds but none seemed to work so I checked wich version of flutter I was using with flutter doctor. I was already using the beta channel (Version 1.25.0...). Since there were newer beta versions available I ran flutter upgrade and upgraded to version 1.26.0....pre.
The issue just disappeared so I guess it got fixed in a newer version.
So... just upgrade flutter to the newest beta version.
Related
I am trying to create an app where the user is able to select the time and the date, I want to make it such that the TimePicker is always showing on the screen for the user. I have managed to do this but I am unable to get the Time that is set by the user as there is no OnChanged method available.
Furthermore, I cannot change the functionality of the cancel and the Ok button that is displayed.
Here is the code:
Scaffold(
backgroundColor: Color(0xff2E2E42),
appBar: PreferredSize(preferredSize: Size.fromHeight(50),
child: CustomAppBar("Add Alarm")),
body: Column(
children: [
TimePickerDialog(initialTime: TimeOfDay.now(), onEntryModeChanged: (TimePicker){
print(TimePicker);
},),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 42.0),
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
MaterialButton(onPressed: (){pickDate(context);},
child: Column(
children: [
Center(
child: Text(getDate(), style: TextStyle(
color: Colors.white,
fontSize: 30,
),),
),
],
),)
],
),
),
],
),
);
This is what the output looks like:
Thanks for helping :)
Unfortunately there is no easy way to convert TimePickerDialog into a non-dialog version, because much of it is hardcoded. This is unlike the date picker counterpart, where we can choose to either use DatePickerDialog or standalone DayPicker, MonthPicker, YearPicker widgets.
You basically have 3 choices, none of them is great.
Copy the dialog code (time_picker.dart file) into your project and modify it to suit your needs.
Use CupertinoTimerPicker (very different visual style).
Create your own, build it however you like.
i am created an SVG image for background, but it is loaded after some time, the issue is:
when it is not loaded yet all widgets appears randomly. i just need a loader after the image loaded it page widget appears.
the code is:
Scaffold(
appBar: const _CustomNotificationAppBar(),
body: isFinished
? SingleChildScrollView(
child: Stack(
children: [
//notification background
Opacity(
opacity: 0.42,
child: SvgPicture.asset(
'assets/images/notification_background.svg',
),
),
IconButton(
icon: const Icon(
Icons.notifications_active_outlined,
),
onPressed: () {})),
],
),
)
: const Center(
child: CircularProgressIndicator(),
),
);
well if I understands you well and as long as your SVG is loading from the device "asset",
there should not be delay in first place.
I think the problem is you emulator or physical device is too slow , And you may face this problem in debug only
try to run flutter build APK and install that generated APK in your phone and check if problem remains.
however you can achieve that also like this
SvgPicture.asset(
'assets/images/notification_background.svg',
placeholderBuilder: (context) => Text("I am Loading"),
),
You can wrap it in a Container, and it will work.
For eg:
Container(
//height :desired height,
//width : desired width
child: Opacity(
opacity: 0.42,
child: SvgPicture.asset(
'assets/images/notification_background.svg',
),
))
You can pass a placeholderBuilder to your SvgPicture.asset like this:
SvgPicture.asset(
'assets/images/notification_background.svg',
placeholderBuilder: (context) => Icon(Icons.your_desired_icon),
),
You can also wrap the Icon with a SizedBox if you need to comply with a certain size, or replace it by any other widget that you wish.
More info about the widget you're using is available in its API docs.
I have a sign-up page which contains Text like privacy policy, terms and etc and I want that on clicking those text webpage should get open.
I used the GestureDetector for that but the issue is that it contains one child only
But I want all the three texts to be there and should perform Onclick or here onTap.
Any idea?
GestureDetector(
onTap: () => launch(
'https://docs.flutter.io/flutter/services/UrlLauncher- class.html'),
child: Text('Terms of use,',
style: TextStyle(
color: Colors.blueAccent,
fontSize: 18.0,
fontWeight: FontWeight.bold)),
)
expected: all three text with onTap inside GestureDetector.
actual: only one child is there.
You can try creating a Row widget which contains the text you need, that is, privacy policy, terms and etc, as its children. And then wrap the Text widgets with GestureDetector widgets. A code snippet is given below:
Container(
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: (){
print("Privacy policy");
},
child: Text("Privacy policy, "),
),
GestureDetector(
onTap: (){
print('Terms');
},
child: Text("Terms, "),
),
GestureDetector(
onTap: (){
print('Contact Us');
},
child: Text("Contact Us"),
),
],
),
),
Outputs:
Hope this helps!!
That's currently not directly supported by Flutter. But you can use RichText for implementing the requirement.
It is similar to Spannable string in Android.
I was trying to clone WhatsApp(iOS version) with flutter using Cupertino Widgets.
while trying to make the header with CupertinoSliverNavigationBar i noticed that the height of CupertinoSliverNavigationBar cannot be increased.
My Code
return CupertinoPageScaffold(
child: NotificationListener<ScrollNotification>(
onNotification: (scrollNotification) {
if (scrollNotification is ScrollStartNotification) {
_onStartScroll(scrollNotification.metrics);
} else if (scrollNotification is ScrollUpdateNotification) {
_onUpdateScroll(scrollNotification.metrics);
} else if (scrollNotification is ScrollEndNotification) {
_onEndScroll(scrollNotification.metrics);
}
},
child: CustomScrollView(
slivers: <Widget>[
CupertinoSliverNavigationBar(
leading: GestureDetector(
child: Padding(
padding: EdgeInsets.only(top: 10.0),
child: Text(
"Edit",
style: TextStyle(
color: Constants.primaryColor,
fontSize: 18.0,
),
),
),
onTap: ()=>print("Tapped"),
),
trailing: GestureDetector(
child: Icon(
CupertinoIcons.create_solid,
size: 25.0,
),
onTap: ()=>print("Tapped"),
),
automaticallyImplyLeading: false,
largeTitle: Column(
children: <Widget>[
Container(
child: Text(
"Chats",
textAlign: TextAlign.left,
),
),
GestureDetector(
child: SearchBar(),
),
],
),
),
],
),
),
);
Screenshots below:
What i want to achieve
What i got
Is there any work around or anyway to increase the height? Thanks!
Flutter purists and advocates will kill me, but those sizes are part of the constants values (like MaterialDesign guidelines values), 2 quick options:
Option 1:
Modify the SDK directly:
Ctrl (or Cmd) + click in CustomScrollView, will open flutter/lib/src/cupertino/nav_bar.dart
Modify line 22 or 26:
/// This height is constant and independent of accessibility as it is in iOS.
const double _kNavBarPersistentHeight = 44.0;
/// Size increase from expanding the navigation bar into an iOS-11-style large title
/// form in a [CustomScrollView].
const double _kNavBarLargeTitleHeightExtension = 52.0; // change this one!
Option 2:
copy nav_bar.dart directly in your project, and modify it, or better yet, grab all the dependencies of CustomScrollView(), and put ur own name, and ur own values there... I guess that beyond being a standard design guideline from Apple, the ability to change those values are required for several devs. We should open a Github request maybe.
Hope you find my "hacky" solution useful!
Result:
You don't need to modify the SDK or something like that.
I have found a simple solution.
add this to CustomScrollView, adjust the anchor until you get a good UI.
CustomScrollView(
anchor: 0.07,
See the image here
I have build a simple app to learn flutter. I want to move a flat button to the most right of the screen.
I cant seem to use padding property and I don't know why.
new FlatButton(
onPressed: () => debugPrint("pressed"),
child: new Text("DONATE",
style: new TextStyle(
fontSize: 16,
color: Colors.green[400]
)
)
)
Try this:
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
onPressed: () => debugPrint("pressed"),
child: new Text("DONATE",
style: new TextStyle(
fontSize: 16,
color: Colors.green[400]
)
)
),
],
),
Have you checked out flutter layouts,here
plus padding property is for inside the button to move the button manipulate the margin property.
Hope that helps.