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.
Related
I am new in flutter.
I am following some YouTube videos to learn flutter. After adding a picture in card(home screen) now I want to add two buttons below that picture. how can i do it.
the picture Adding code
body: Center(
child: Card(
child: Column(
children: [Image.asset("assets/image-name")],
),
),
),
Here you have a great page, where you can find implementations of basic material widgets in Flutter.
For your example, it would look like this:
body: Center(
child: Card(
child: Column(
children: [
Image.asset("assets/image-name"),
ElevatedButton(
onPressed: () {
// Respond to button press
},
child: Text('CONTAINED BUTTON'),
)
],
),
),
),
For a second button, you can just add another one in the children array.
You can also wrap both buttons in Row widget, that will allow you to place them horizontally, next to each other.
How can I change the color of a ButtonBar in Flutter? There isn't a color in ButtonBarTheme as far as I can tell. I am trying to do something like this:
return Scaffold(
backgroundColor: Colors.red,
body: Center(child: Text('foo')),
// Somehow get the color of these buttons different to backgroundColor
persistentFooterButtons: _buildTextButtons(),
);
The best I can think of at the moment is to somehow reimplement the persistent footer buttons myself, but that is ugly. The problem seems to be that the Scaffold backgroundColor property is used in multiple places, yet is defined in a single widget. This means I can't wrap it in a Theme and override it piecemeal either, as far as I can tell.
Oh, I might have found an answer. I had been using both the bottomNavigationBar and the persistentFooterButtons. persistentFooterButtons are wrapped in a ButtonBar, which appears to limit your styling options.
bottomNavigationBar is a single widget, though, so you can fiddle with it. I switched to just build my own persistentFooterButtons after all.
(I had to edit this from my app, so it might not be copy/paste ready.)
Widget _buildNavigationBar(BuildContext ctx, Color barColor) {
List<Widget> actions = [
// We need the first element to be big, to push everything to the right.
Expanded(
child: Container(),
),
];
actions.addAll(_buildTextButtons(ctx));
Widget actionContainer = ColoredBox(
color: barColor,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: actions,
),
),
);
return Column(
mainAxisSize: MainAxisSize.min,
children: [
actionContainer,
// I use this to make space for ads.
Container(
color: barColor,
height: 50,
),
],
);
}
return Scaffold(
backgroundColor: Colors.red,
body: Center(child: Text('foo')),
// removed this persistentFooterButtons: _buildTextButtons(),
// and replaced with this:
bottomNavigationBar: _buildNavigationBar(ctx),
);
you can also wrap that ButtonBar into Container and After that, you can make any type of changes to that ButtonBar, like coloring etc
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
If use the Stepper in horizontal mode, I get the following result.
However, I want the title of the Step to appear below the counter. How can I achieve that in Flutter?
In _StepperState class there is method _buildHorizontal with code:
Row(
children: <Widget>[
Container(
height: 72.0,
child: Center(
child: _buildIcon(i),
),
),
Container(
margin: const EdgeInsetsDirectional.only(start: 12.0),
child: _buildHeaderText(i),
),
],
),
where _buildHeaderText returns title or title with subtitle.
So, you can't do what you want with standard Stepper - you have to customize this class
I would like to have a static bottom bar for my app.
This bar should content the hour of a device in the middle, and the temperature read by another device on the right side.
My problem is just about the positioning/sizing.
When I start it (with android studio, on real or virtual device), it doesn't work : the preview is not what I excepted, the dimensions I choose seem to have changed.
But when I hot-reload it, it becomes exactly what I want like this :
The problem is that the final app is not the hot-reloaded one ..
I may have identify the problem,
I use a MediaQuery.of(context).size and a builder to obtain the context in order to fit with all the devices considering the size. This solution must be a dirty one but I don't find anything else..
Here is my code, hope the situation is clear...
return new MediaQuery(
data: MediaQueryData.fromWindow(ui.window),
child: Builder(
builder: (context) {
return new Builder(
builder: (
context) {
return
new MaterialApp(
home: new DefaultTabController(
length: 6,
child: Scaffold(
bottomNavigationBar:
new Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height*0.1,
alignment: Alignment.centerRight,
child: new Container(
color: Colors.blue,
width: MediaQuery.of(context).size.width* 2/3,
alignment: Alignment.centerRight,
child: new Row(
children: <Widget>[
new Expanded(child: new Container(
color : Colors.yellow,
child: new Text('22 : 22' ),
alignment: Alignment.center,
)),
new Expanded(child:new Container(
color: Colors.pink,
child: new Text(' 37.8 °C'),
margin: new EdgeInsets.all(MediaQuery.of(context).size.width*0.02),
alignment: Alignment.centerRight,
))
],
),
),
),
Thank you for helping.
You could use a Stack and position one of the widget absolute over the other one:
new Stack(
children: <Widget> [
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
new Text(time),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget> [
new Text(temperature)
],
),
],
),
where time & temperature are variables that were set within the state (Stateful Widgets). Then just include it in bottomNavigationBar.
I eventually added my previous code in a StatelessWidget and call it in the bottomNavigationBar field of the Scaffold : it does the job.
And I call MediaQuery.of(context) within the StatelessWidget created
Thank you.