Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
Hi, as the title says, I need to make a button like on the photo. Thanks. There's no code, because I have no idea how to do it.
you can create that with Circular Indicator Widget and a Icon Widget and use Stack widget to create the image.
I am not sure about what specific functionality you are doing using the button in your image circular grey border has two colours blue and grey if you want to show processing through a grey circular box then you have to use a different approach if you specify what you want to do through this button I will try a different approach the simple static button code is here. I Hope this will help you.
import 'package:flutter/material.dart';
class X extends StatefulWidget {
const X({Key? key}) : super(key: key);
#override
_XState createState() => _XState();
}
class _XState extends State<X> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onTap: (){},
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.grey, width: 3)),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blueAccent,
),
child: Icon(Icons.keyboard_tab,color: Colors.white,),
),
),
),
),
),
);
}
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last month.
Improve this question
I want to put a text and icon in the status bar that comes from the api . and it can changes base on the location for example . is there any solution for that?
it sounds crazy but is it really workable? I'm new in Flutter . thanks
we have statusBar and appBar, i think you mean appBar because statusBar is designed by os and you can not add some widgets to it.
if you want to customize an appBar you can create one to make your app what you want.
here is custom app bar that i'm using in my code:
class CustomAppBar extends StatelessWidget {
final String? title;
final bool? hasBackButton;
final Color? color;
final Widget? actionWidget;
final double? height;
const CustomAppBar(
{Key? key,
this.title,
this.hasBackButton = true,
this.color = primaryDark, this.actionWidget, this.height})
: super(key: key);
#override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
return Consumer<SettingProvider>(
builder: (context, settingProvider, child) {
return Stack(
alignment: AlignmentDirectional.centerStart,
children: [
SizedBox(
width: width,
height: height ?? width * 0.1333,
child: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: width * 0.1333),
child: TextView(
text: title ?? '',
color: color ?? primaryDark,
size: 16,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
),
),
),
),
if (hasBackButton!)
InkWell(
onTap: () => locator<NavigationService>().goBack(),
splashColor: transparent,
highlightColor: transparent,
child: Padding(
padding: EdgeInsets.all(width * 0.02),
child: RotatedBox(
quarterTurns: settingProvider.isRTL ? 2 : 0,
child: ArrowBackIcon(
color: color!,
),
),
),
),
if(actionWidget != null)
Align(
alignment: Alignment.centerLeft,
child: actionWidget!)
],
);
});
}
}
note: i have TextView (a widget that i modularized it as Text) and ArrowBackIcon (a widget that i modularized it as Icon),
if you mean you want to change the status again, my idea is: you can hide your status bar like this video and you can create your own status bar ,but note that it is not going to be well in most of the phones.
happy coding...
Moraghebe khodet bash ;)
if by status bar you mean app bar you can add text and icon in app bar like this
appBar: AppBar(
title: const Text("Geolocator"),
leading: Icon(Icons.search),
),
In the screen, I have a Column, it has a cusotm made widget of specific height. Then, I have Expanded, in which I have a TabBar which has three tabs.
In one of those tabs, I want to show a list. First, I have a padding, which contains column. The column has some text, which should remain at top and the list should be shown in the space which is remaining. I am using Expanded for that, but it is not working.
I can't use ListView directly, and also can't use expanded. It is only working when I am giving it a container of fix size. Now, in different screens, it will look different. So, I want to take all of the remaining space and build the list there. Code for reference -
Here is the doubts screen, which is one of the tabs of main screen -
import 'package:flutter/material.dart';
import 'package:my_board_plus/size_config.dart';
import 'package:my_board_plus/styles.dart';
import '../../api_handling/api_fetch/fetch_doubt_questions.dart';
import '../../data_models/doubt_question_model.dart';
class NewDoubtsScreen extends StatefulWidget {
const NewDoubtsScreen({Key? key}) : super(key: key);
#override
State<NewDoubtsScreen> createState() => _NewDoubtsScreenState();
}
class _NewDoubtsScreenState extends State<NewDoubtsScreen> {
late Future<List<DoubtQuestionModel>> doubtQuestionsList;
#override
void initState() {
doubtQuestionsList = fetchDoubtQuestion();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: backgroundColor2,
floatingActionButton: Container(
width: getProportionateScreenWidth(130),
height: getProportionateScreenHeight(50),
decoration: BoxDecoration(
color: brandPurple,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Text(
'? My Doubts',
style: TextStyle(
color: Colors.white,
fontSize: 15,
),
),
),
),
body: Padding(
padding: EdgeInsets.only(top: 8.0, left: 5),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Trending Doubts',
style: TextStyle(
color: Colors.white,
),
),
Text(
'View all',
style: TextStyle(
color: brandYellow,
decoration: TextDecoration.underline
),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Container(
height: getProportionateScreenHeight(530),
width: double.infinity,
color: Colors.red,
),
),
],
),
),
);
}
}
The red area that you are seeing is the one. I want it to occupy whole area available in the phone screen, so I can show list in it which should be scrollable. In this case, it is occupying all, but in different screens, it might not. So, please give me some suggestions.
You can try to give the height of the container like
height: double.infinity
Or you can give the height of it with substracting the other height from the screen size like
height: MediaQuery.of(context).size.height - getProportionateScreenHeight(50) //the heigth size that you give the other widget that top of it
try to wrap your Padding widget with the Expanded widget,
Expanded widget in column will take the rest of the space of the screen.
also no need to give height to Container widget, so you can remove getProportionateScreenHeight(530) this one
I am struggling to set up the correct layout for my composite widgets.
It is the Stack widget containing two images each wrapped in the corresponding widget which are applying some visual effects on the images.
The images are supposed to change every couple of seconds and then I am using the AnimatedSwitcher to animate the fading transition between them.
This is how it looks now:
The result I want to achieve should look like this:
Here is the source code of the corresponding widget:
import 'dart:ui';
import 'package:demo_flutter_fading_images/themes/style.dart';
import 'package:flutter/material.dart';
class ImagesStack extends StatefulWidget {
final String imagePath;
const ImagesStack({required Key key, required this.imagePath}) : super(key: key);
#override
State<ImagesStack> createState() => _ImagesStackState();
}
class _ImagesStackState extends State<ImagesStack> {
#override
Widget build(BuildContext context) {
return Center(
child: Stack(children: <Widget>[
ImageFiltered(
imageFilter: ImageFilter.blur(
sigmaX: 6,
sigmaY: 6,
),
child: Container(
// constraints: const BoxConstraints.expand(),
constraints: BoxConstraints.tight(const Size(360, 500)),
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.center,
image: AssetImage(widget.imagePath),
fit: BoxFit.fill,
),
),
),
),
Container(
margin: const EdgeInsets.fromLTRB(8, 4, 8, 4),
decoration: frontImageBoxDecoration,
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
widget.imagePath,
fit: BoxFit.fill,
),
),
),
]),
);
}
}
And the full source code of demo project:
github - demo project
I tried it quickly on dartpad.
https://dartpad.dev/?id=3c24c716a9844b706662cb495675f56d
You can refer to the code to follow the structure and make changes. I have left some comments to help understand the code.
Try resizing the window after running the app in dart to see how the image gets positioned for different sizes.
I am going off of a login screen tempalte,a nd am trying to get a widget class for a button to just show the username input as an alert on the screen. The usernameinput widget is defined but when I import it, it does not work.
class _InputEmailState extends State<InputEmail> {
final myController = new TextEditingController();
This is the part where I define the input, and this is where I import the class in the button widget:
import 'package:login_minimalist/widget/inputEmail.dart';
When I try and reference the myController.text value, I get the error
The getter 'myController' isn't defined for the class '_ButtonLoginState'.
import 'package:flutter/material.dart';
import 'package:login_minimalist/widget/inputEmail.dart';
class ButtonLogin extends StatefulWidget {
#override
ButtonLoginState createState() => ButtonLoginState();
}
class ButtonLoginState extends State<ButtonLogin> {
#override
Here is the button widget code:
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 40, right: 50, left: 200),
child: Container(
alignment: Alignment.bottomRight,
height: 50,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.blue[300],
blurRadius: 10.0, // has the effect of softening the shadow
spreadRadius: 1.0, // has the effect of extending the shadow
offset: Offset(
5.0, // horizontal, move right 10
5.0, // vertical, move down 10
),
),
],
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: FlatButton(
onPressed: () {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
// Retrieve the text the user has entered by using the
// TextEditingController.
content: Text(InputEmailState.getUsername),
);
},
);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Sign in',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: 14,
fontWeight: FontWeight.w700,
),
),
Icon(
Icons.arrow_forward,
color: Colors.lightBlueAccent,
),
],
),
),
),
);
And here is the Input code:
class InputEmailState extends State<InputEmail> {
final myController = new TextEditingController();
getUsername() {
return(myController.text);
}
#override
void dispose() {
// Clean up the controller when the widget is disposed.
myController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 50, left: 50, right: 50),
child: Container(
height: 60,
width: MediaQuery.of(context).size.width,
child: TextField(
controller: myController,
style: TextStyle(
color: Colors.white,
),
decoration: InputDecoration(
border: InputBorder.none,
fillColor: Colors.lightBlueAccent,
labelText: 'Student ID',
labelStyle: TextStyle(
color: Colors.white70,
fontSize: 20,
),
),
),
),
);
}
If I understand your question correctly, you're trying to access _ButtonLoginState from another class/file. However, in Dart, classes, members, variables, etc. that begin with an underline ("_") are considered private. You can't access them from a different file (except in some special situations with libraries).
To solve this, you can change the name of the class to ButtonLoginState and it should work.
EDIT: In response to more info:
You don't seem to have fully understood the concepts of State in a StatefulWidget. I would strongly recommend taking a good look through the Flutter guide on the subject.
There are many different ways of managing state and what I am going to explain is almost definitely not the best option most of the time (this was the introductory approach some time ago, but I can't even find the example anymore), however, it does work. For a more general option, I recommend Provider.
In your case, the problem starts with this: Text(InputEmailState.getUsername). You're not calling InputEmailState.getUsername, you're simply passing a reference to it. You need to include parentheses to actually call it - InputEmailState.getUsername().
However, this isn't the whole issue. You're trying to access this function using the name of the class, which means you're trying to use it as a static method. However, its an instance method (ie: you need a specific instance of the class to access it. This is the state I was talking about.
To simply get access to the state object of a specific widget, you can use a Key (generally a GlobalKey). You can define this in a parent widget, for example, and pass it as the key parameter of your InputEmail widget and keep a reference in the parent class. Then, to get the username, you can call <key>.currentState.getUsername() which will return the instance value. The exact implementation varies, and I don't have your code to know how it should be implemented.
As I say, this isn't really the recommended approach anymore. I strongly recommend getting to grips with the state concept, then it should be obvious what the best approach is.
I have a small problem.
I want to click on my custom icon, and I don't know how to do that :c
after this click, I want to go to another widget, but with that, I can try to work (i hope)
if u can tell me also how to do it with the entire widget.
class secondWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 100,
margin: EdgeInsets.only(top: 100, bottom: 10),
color: Colors.pink,
child: new Icon(const IconData(0xe800, fontFamily: 'Dupa')),
//this is not working :c
onPressed: () {
newWidgetGoBrr();
});
);
Container doesn't have an onPressed. You need to use a GestureDetector widget with either Container or Icon.
GestureDetector(
onTap: () {
// after click logic goes here.
newWidgetGoBrr();
},
child: Container(
height: 100,
width: 100,
margin: EdgeInsets.only(top: 100, bottom: 10),
color: Colors.pink,
child: new Icon(const IconData(0xe800, fontFamily: 'Dupa')),
),
),
What you need is some type of detector that can detect your gesture. It can be obtained through many widgets but the most frequently used one is GestureDetector and InkWell.
You can wrap your Icon with an either of the widget. These widgets gives you access to the onTap property.
It's better to wrap your Icon with the Inkwell/GestureDector than to wrap the whole container(that depends on your requirement).
You can implement it like this:
class secondWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 100,
margin: EdgeInsets.only(top: 100, bottom: 10),
color: Colors.pink,
child: InkWell(
onTap: newWidgetGoBrr(), // your logic
child: Icon(
const IconData(0xe800, fontFamily: 'Dupa'),
),
),
);
}
}
Note: With the new flutter release you don't need to use the new keyword anymore.