I am building this flutter App. My problem is I canno fit all the widgets in one screen. and all the font sizes and icons seem to be different although they are meant to be the same. In ReusableCard, when the Container height and width properties are set to 200 and 250 respectively, the whole app resizes but they are not uniform as shown in the picture. Does anyone has a suggestion?
import 'results_page.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'icon_content_widget.dart';
import 'reusable_card.dart';
import 'bottom_button.dart';
import 'calculator_brain.dart';
import 'constants.dart';
enum GenderType {
male,
female,
}
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
GenderType selectedGender;
int height = 180;
int weight = 60;
int age = 20;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('CALCULATE BMI'), centerTitle: true),
body: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
child: FittedBox(
child: Material(
color: Color(0xFF00053C),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: ReusableCard(
onPress: () {
setState(() {
selectedGender = GenderType.male;
});
},
colour: selectedGender == GenderType.male
? kActiveCardColor
: kInactiveCardColor,
cardChild:
IconContentWidget('MALE', FontAwesomeIcons.mars),
),
),
Container(
child: ReusableCard(
onPress: () {
setState(() {
selectedGender = GenderType.female;
});
},
colour: selectedGender == GenderType.female
? kActiveCardColor
: kInactiveCardColor,
cardChild: IconContentWidget(
'FEMALE', FontAwesomeIcons.venus),
),
),
],
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Container(
child: FittedBox(
child: Material(
color: Color(0xFF00053C),
child: Row(
children: <Widget>[
Container(
child: ReusableCard(
colour: kActiveCardColor,
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('HEIGHT', style: kLabelTextStyle),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Text(height.toString(),
style: kNumberTextStyle),
Text('cm', style: kLabelTextStyle),
],
),
SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.white,
inactiveTrackColor: Color(0xFF8D8E98),
thumbColor: Color(0xFFEB1555),
overlayColor: Color(0x29EB1555),
thumbShape: RoundSliderThumbShape(
enabledThumbRadius: 15.0),
overlayShape: RoundSliderOverlayShape(
overlayRadius: 30.0),
),
child: Slider(
value: height.toDouble(),
min: 120.0,
max: 220.0,
onChanged: (double newValue) {
setState(() {
height = newValue.round();
});
},
),
),
],
),
),
),
],
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
child: FittedBox(
child: Material(
color: Color(0xFF00053C),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: ReusableCard(
colour: kActiveCardColor,
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'WEIGHT(Kg)',
style: kLabelTextStyle,
),
Text(
weight.toString(),
style: kNumberTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RoundIconButton(
iconName: FontAwesomeIcons.minus,
onPressed: () {
setState(() {
weight--;
});
},
),
SizedBox(
width: 15.0,
),
RoundIconButton(
iconName: FontAwesomeIcons.plus,
onPressed: () {
setState(() {
weight++;
});
},
),
],
),
],
),
),
),
Container(
child: ReusableCard(
colour: kActiveCardColor,
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'AGE',
style: kLabelTextStyle,
),
Text(age.toString(), style: kNumberTextStyle),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RoundIconButton(
iconName: FontAwesomeIcons.minus,
onPressed: () {
setState(() {
age--;
});
},
),
SizedBox(
width: 15.0,
),
RoundIconButton(
iconName: FontAwesomeIcons.plus,
onPressed: () {
setState(() {
age++;
});
},
)
],
),
],
),
),
),
],
),
),
),
),
),
BottomButton(
buttonTitle: 'CALCULATE',
onTap: () {
CalculatorBrain calc =
CalculatorBrain(height: height, weight: weight);
print(calc);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return ResultsPage(
bmiResult: calc.calculateBMI(),
interpretation: calc.getInterpretation(),
resultText: calc.getResult());
},
),
);
},
),
],
),
);
}
}
class RoundIconButton extends StatelessWidget {
final Function onPressed;
final IconData iconName;
RoundIconButton({#required this.iconName, this.onPressed});
#override
Widget build(BuildContext context) {
return RawMaterialButton(
shape: CircleBorder(),
fillColor: Color(0xFF4C4F5E),
constraints: BoxConstraints.tightFor(width: 56.0, height: 56.0),
elevation: 0.0,
onPressed: onPressed,
child: Icon(iconName),
);
}
}
class ReusableCard extends StatelessWidget {
ReusableCard({#required this.colour, this.cardChild, this.onPress});
final Color colour;
final Widget cardChild;
final Function onPress;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress,
child: Container(
height: 200,
width: 250,
child: cardChild,
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: colour,
borderRadius: BorderRadius.circular(10.0),
),
),
);
}
}[![enter image description here][1]][1]
Related
How to fix this error:
Undefined string name
In line 64 I have defined the string name but in line 117 the string name is undefined and if I try to make it defined there come's an other error in line 60: The body might complete normally, causing 'null' to be returned, but the return type, 'Widget', is a potentially non-nullable type and if I fix this I get an black screen.
So in short can anyone help me with this error without getting other errors.
import 'dart:async';
import 'dart:io';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svg/svg.dart';
import 'package:hetmaantje/arbo.dart';
import 'package:hetmaantje/inschrijven.dart';
import 'package:hetmaantje/quiz_screen.dart';
import 'package:hetmaantje/utils1/colors.dart';
import 'package:hetmaantje/todolist.dart';
import 'package:page_transition/page_transition.dart';
import 'package:path_provider/path_provider.dart';
import 'contactpage.dart';
class home extends StatefulWidget {
const home({Key? key}) : super(key: key);
#override
State<home> createState() => _homeState();
}
class _homeState extends State<home> {
String pathPDF = "assets/arbo";
#override
void initState() {
super.initState();
fromAsset('assets/arbo.pdf', 'arbo.pdf').then((f) {
setState(() {
pathPDF = f.path;
});
});
}
Future<File> fromAsset(String asset, String filename) async {
Completer<File> completer = Completer();
try {
var dir = await getApplicationDocumentsDirectory();
File file = File("${dir.path}/$filename");
var data = await rootBundle.load(asset);
var bytes = data.buffer.asUint8List();
await file.writeAsBytes(bytes, flush: true);
completer.complete(file);
} catch (e) {
throw Exception('Error parsing asset file!');
}
return completer.future;
}
final FirebaseAuth auth = FirebaseAuth.instance;
late final User? user = auth.currentUser;
late final uid = user?.uid;
Widget build(BuildContext context) {
DocumentReference documentReference = FirebaseFirestore.instance.collection(uid!).doc("name");
documentReference.get().then((datasnapshot){
String name = datasnapshot.data().toString();
});
FirebaseFirestore.instance.collection(uid!);
// to get size
var size = MediaQuery.of(context).size;
// style
var cardTextStyle = TextStyle(
fontFamily: "Montserrat Regular",
fontSize: 14,
color: Color.fromRGBO(63, 63, 63, 1));
return Scaffold(
body: Stack(
children: <Widget>[
Container(
height: size.height * 1,
decoration: BoxDecoration (gradient: LinearGradient(colors: [
hexStringToColor("FFBEC8"),
hexStringToColor("fe98a8"),
hexStringToColor("FC98A7"),
hexStringToColor("#FF8799")
]
))),
SafeArea(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Container(
height: 64,
margin: EdgeInsets.only(bottom: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(
radius: 29,
backgroundImage: AssetImage(
'assets/logo.png'),
),
SizedBox(
width: 16,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"$name",
style: TextStyle(
fontFamily: "Montserrat Medium",
color: Colors.white,
fontSize: 20),
),
],
)
],
),
),
Expanded(
child: GridView.count(
mainAxisSpacing: 10,
crossAxisSpacing: 10,
primary: false,
crossAxisCount: 2,
children: <Widget>[
Card(
color: Colors.grey.shade100,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
//=> PDFScreen(path: pathPDF)),);
children: <Widget>[
GestureDetector(
onTap:
() =>
Navigator.of(context).push(PageTransition(
child: PDFScreen(path: pathPDF),
type: PageTransitionType.fade)),
child:
SvgPicture.asset(
'assets/moon.svg',
height: 120,
)
),
Text(
'Arbo-lijst',
style: cardTextStyle,
)
],
),
),
Card(
color: Colors.grey.shade100,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap:
() =>
Navigator.of(context).push(PageTransition(
child: todolist(),
type: PageTransitionType.fade)),
child:
SvgPicture.asset(
'assets/moon.svg',
height: 120,
)
),
Text(
"To do lijst",
style: cardTextStyle,
)
],
),
),
Card(
color: Colors.grey.shade100,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap:
() =>
Navigator.of(context).push(PageTransition(
child: home(),
type: PageTransitionType.fade)),
child:
SvgPicture.asset(
'assets/moon.svg',
height: 120,
)
),
Text(
'Uitzetlijst',
style: cardTextStyle,
)
],
),
),
Card(
color: Colors.grey.shade100,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap:
() =>
Navigator.of(context).push(PageTransition(
child: inschrijven(),
type: PageTransitionType.fade)),
child:
SvgPicture.asset(
'assets/moon.svg',
height: 120,
)
),
Text(
'Inschrijven',
style: cardTextStyle,
)
],
),
),
Card(
color: Colors.grey.shade100,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap:
() =>
Navigator.of(context).push(PageTransition(
child: home(),
type: PageTransitionType.fade)),
child:
SvgPicture.asset(
'assets/moon.svg',
height: 120,
)
),
Text(
'Opstart advies',
style: cardTextStyle,
)
],
),
),
Card(
color: Colors.grey.shade100,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap:
() =>
Navigator.of(context).push(PageTransition(
child: contactpage(),
type: PageTransitionType.fade)),
child:
SvgPicture.asset(
'assets/moon.svg',
height: 120,
)
),
Text(
'Contact',
style: cardTextStyle,
)
],
),
),
Card(
color: Colors.grey.shade100,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap:
() =>
Navigator.of(context).push(PageTransition(
child: quiz_screen(),
type: PageTransitionType.fade)),
child:
SvgPicture.asset(
'assets/moon.svg',
height: 120,
)
),
Text(
'Quiz',
style: cardTextStyle,
)
],
),
),
Card(
color: Colors.grey.shade100,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap:
() =>
Navigator.of(context).push(PageTransition(
child: home(),
type: PageTransitionType.fade)),
child:
SvgPicture.asset(
'assets/moon.svg',
height: 120,
)
),
Text(
'Kaart',
style: cardTextStyle,
)
],
),
),
],
),
),
],
),
),
),
],
),
);
}
}
You need define name out of build method to access it in all your class:
String name = ''; //<-- define this
Widget build(BuildContext context) {
DocumentReference documentReference = FirebaseFirestore.instance.collection(uid!).doc("name");
documentReference.get().then((datasnapshot){
name = datasnapshot.data().toString();//<-- change this
});
...
}
im going to change colors Container when
click on GestureDetector but nothing change... .
like this image:and im click on vector men and women..
and nothing change...i use linear gradiant and List of color please help me to solve this problem
import 'package:flutter/material.dart';
import 'icon_content.dart';
import 'reusable_card.dart';
const BottomContainerHeight = 80.0;
List<Color> inactiveCardColoursFemale = [Color(0xFF42A5F5), Color(0xFF039BE5)];
List<Color> activeCardColoursFemale = [Color(0xFF303F9F), Color(0xFF283593)];
List<Color> inactiveCardColoursMale = [Color(0xFFFBC02D), Color(0xFFFFB300)];
List<Color> activeCardColoursMale = [Color(0xFFFF6F00), Color(0xFFE65100)];
enum Gender {
male,
female,
}
class InputPage extends StatefulWidget {
const InputPage({Key? key}) : super(key: key);
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
Gender selectedGender = Gender.female;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepOrangeAccent,
title: const Text("Iman Bmi"),
centerTitle: true,
),
body: Column(
children: [
Expanded(
child: Expanded(
child: Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
selectedGender = Gender.female;
});
},
child: ReusableCard(
colour: selectedGender == Gender.female
? inactiveCardColoursFemale
: activeCardColoursFemale,
cardChild: IconContent(
svgPicture: 'assets/2.svg',
label: 'women',
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
selectedGender = Gender.male;
});
},
child: ReusableCard(
colour: selectedGender == Gender.male
? activeCardColoursMale
: inactiveCardColoursMale,
cardChild: IconContent(
svgPicture: 'assets/3.svg',
label: 'men',
)),
),
),
],
),
)),
Expanded(
child: ReusableCard(
colour: [Colors.deepPurple, Colors.purple],
//colour: Color(0xFF65E655),
cardChild: Row(
children: [],
),
),
),
Expanded(
child: Row(
children: [
Expanded(
child: ReusableCard(
colour: [Colors.teal, Colors.tealAccent],
//colour: Color(0xFF65E655),
cardChild: Column(
children: [],
),
),
),
Expanded(
child: ReusableCard(
colour: [Colors.amber, Colors.yellow],
//colour: Color(0xFF65E655),
cardChild: Column(
children: [],
),
),
),
],
)),
Container(
margin: EdgeInsets.only(top: 20.0),
width: double.infinity,
height: BottomContainerHeight,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Colors.deepOrange, Colors.deepOrangeAccent]),
borderRadius: BorderRadius.circular(10.0)),
),
],
),
);
}
}
and My Reusable Card Class Code: i use to linear Gradiant and List of color
import 'package:flutter/material.dart';
class ReusableCard extends StatelessWidget {
ReusableCard({required this.colour, required this.cardChild});
//required this.colour
final List<Color> colour;
final Widget cardChild;
#override
Widget build(BuildContext context) {
return Container(
child: cardChild,
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
//color: colour,
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: colour,
),
//Color(0xFF65E655)
borderRadius: BorderRadius.circular(10.0)),
);
}
}
Removing the first Expanded widget inside your Column should fix your issue.
// Change this
Column(children: [Expanded(child: Expanded(child: Row()))])
// to this
Column(children: [Expanded(child: Row())])
i have list item on my screen ... All I want to know is, how to add dynamicaly a list item on pressing a floatingActionbutton....
here is a first screen on which i have a button (for adding one more item like above item)
in this picture after selecting suit id .. i want when i pressed add button a copy of naap widget displays from which i can select 2ndsuit id...
i read a tutorial from medium.com but there he used sijmply two text boxes whixh is very easy..whereas in my situation it is pretty difficult for me.... but the situation is same .. you can also visit https://medium.com/#anilpandey071999/dynamically-adding-widgets-on-buttons-on-pressed-function-in-flutter-4d9f139744c7
following is my code...
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'package:flutter_auth/Screens/Dashboard/DashboardScreen.dart';
import 'package:flutter_auth/Screens/SearchCustomer/SearchCustomerScreen.dart';
import 'package:flutter_auth/components/NavDrawer.dart';
import 'package:flutter_auth/components/bottombar.dart';
import 'package:flutter_auth/components/rounded_button.dart';
import 'package:flutter_auth/components/rounded_input_field.dart';
import 'package:flutter_auth/components/drop_down_list.dart';
import 'package:flutter_auth/Screens/Welcome/welcome_screen.dart';
import '../../constants.dart';
import 'components/inputtextfieldname.dart';
import 'components/inputtextfieldnumber.dart';
class AddCustomerScreen extends StatefulWidget {
#override
_AddCustomerScreenState createState() => _AddCustomerScreenState();
}
class _AddCustomerScreenState extends State<AddCustomerScreen> {
final CategoriesScroller categoriesScroller = CategoriesScroller();
ScrollController controller = ScrollController();
bool closeTopContainer = false;
double topContainer = 0;
List<Widget> itemsData = [];
void getPostsData() {
List<AddCustomerScreen> dynamicList = [];
List<dynamic> responseList = Customer_Data;
List<Widget> listItems = [];
responseList.forEach((post) {
listItems.add(GestureDetector(
onTap: () {
// _navigateAndDisplaySelection(context);
},
child: Container(
height: 200,
margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(20.0)), color: Colors.white, boxShadow: [
BoxShadow(color: Colors.black.withAlpha(100), blurRadius: 10.0),
]),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
post["name"], textAlign: TextAlign.center,
style: const TextStyle( fontSize: 20, fontWeight: FontWeight.bold,color: kPrimaryColor),
),
// Expanded(child: drop_down_list())
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding:EdgeInsets.symmetric(horizontal:10.0),
child:Container(
height:2.0,
width:275.0,
color:kPrimaryColor),),
],),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(onPressed: (){}, icon: Icon(Icons.camera_alt_rounded), iconSize: 30,color: Color(0XFFc49864)),
IconButton(onPressed: (){}, icon: Icon(Icons.add_photo_alternate_outlined), iconSize: 30,color: Color(0XFFc49864))
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: drop_down_list())
])
],),
)),));
});
setState(() {
itemsData = listItems;
});
}
#override
void initState() {
super.initState();
getPostsData();
controller.addListener(() {
setState(() {
});
});
}
#override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
final double categoryHeight = size.height*0.30;
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text('Add Customer'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.home,),
onPressed: (){Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return WelcomeScreen();
},
),
);},
)
]
),
drawer: NavDrawer(),
body:Container(
height: size.height,
child: Column(
children: <Widget>[
const SizedBox(
height: 10,
),
AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: closeTopContainer?0:1,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: size.width,
alignment: Alignment.topCenter,
height: closeTopContainer?0:categoryHeight,
child: categoriesScroller),
),
Expanded(
child: ListView.builder(
controller: controller,
itemCount: itemsData.length,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) {
return itemsData[index];
})),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
child: const Icon(Icons.add),
backgroundColor: Color(0xFF6D4C41),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
),
);
}
}
void _navigateAndDisplaySelection(BuildContext context) async {
// Navigator.push returns a Future that completes after calling
// Navigator.pop on the Selection Screen.
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SearchCustomerScreen()),
);
}
class CategoriesScroller extends StatelessWidget {
const CategoriesScroller();
#override
Widget build(BuildContext context) {
final double categoryHeight = MediaQuery.of(context).size.height * 0.35 - 50;
return SingleChildScrollView(
physics: BouncingScrollPhysics(),
// scrollDirection: Axis.horizontal,
child: Container(
margin: const EdgeInsets.symmetric(vertical: 25, horizontal: 25),
child: FittedBox(
fit: BoxFit.fill,
alignment: Alignment.topCenter,
child: Row(
children: <Widget>[
Container(
width: 400,
margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
height: categoryHeight,
decoration: BoxDecoration(color: Color(0XFFc49864), borderRadius: BorderRadius.all(Radius.circular(20.0)),boxShadow: [
BoxShadow(color: Colors.black.withAlpha(100), blurRadius: 10.0),]),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
RoundInputField(
hintText: "Customer Name",
onChanged: (value) {},
),
RoundInputFieldNumber(
hintText: "Phone Number",
icon: Icons.phone,
onChanged: (value) {},
),
],
),
),
),
],
),
),
),
);
}
}
class bottombar extends StatelessWidget {
const bottombar();
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomAppBar(
child: Row(
children: [
IconButton(icon: Icon(Icons.menu), onPressed: () {}),
Spacer(),
IconButton(icon: Icon(Icons.search), onPressed: () {}),
IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
],
),
),
floatingActionButton:
FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
The most straight forward way is imho:
embed the widget to be added with showWidgetA ? WidgetA() : Container();
in your button you toggle the value onPressed: () => showWidgetA = !showWidgetA (showWidgetA being bool)
I am developing an app with a dropdown. Below is my code. I have removed the UI design code to isolate the dropdown section itself.
class ShoppingCartUIState extends State<ShoppingCartUI> {
final _formKey = GlobalKey<FormState>();
String _checkoutDropdownValue=null;
//**UI design Code Removed**//
_showCheckoutPopup() {
String date=DateTime.now().toString();
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)), //this right here
child: Container(
height: MediaQuery.of(context).size.height/3,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
child: Text(
"What is Your Required Delivery Date?",
style: Theme.of(context).textTheme.subtitle,
),)
],
),
Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.calendar_today),
color: Colors.green,
onPressed: () {
date = "111";
},
),
Text(date)
],
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(top:20, left:10),
child: Text(
"What is your Airport of delivery?",
style: Theme.of(context).textTheme.subtitle,
),)
],
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(top:5, left:10),
child: DropdownButton(
hint: Text(
"Please Select ",
style: TextStyle(
fontSize: 14,
),
),
items: <String>[
'Skinless Boneless, Full Loins',
'brown',
'silver'
].map((data) {
return DropdownMenuItem(
child: new Text(data,
style: Theme.of(context).textTheme.body1),
value: data,
);
}).toList(),
onChanged: (String newValue) {
setState(() {
_checkoutDropdownValue = newValue;
print(newValue);
});
},
value: _checkoutDropdownValue),
)
],
),
],
),
));
}
#override
void initState() {
// TODO: implement initState
super.initState();
}
}
The issue is when I change the dropdown item, the new value never get selected. The previously selected value is always displayed. However since i am using a print when dropdown is done, I can see the item has changed.
How can I solved this issue?
Wrap your Dialog widget with StatefulBuilder to rebuild the dialog.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyPage(), //TODO: Add Scaffold
);
}
}
class MyPage extends StatefulWidget {
#override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
String date = "";
String _checkoutDropdownValue;
_showCheckoutPopup() {
return StatefulBuilder(
builder: (context, setState){
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
), //this r// ight here
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
alignment: Alignment.centerLeft,
child: Text(
"What is Your Required Delivery Date?",
style: Theme.of(context).textTheme.subtitle,
),
),
Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.calendar_today),
color: Colors.green,
onPressed: () {
setState(() {
date = "111";
});
},
),
Text(date)
],
),
Container(
margin: EdgeInsets.only(top: 20, left: 10),
alignment: Alignment.centerLeft,
child: Text(
"What is your Airport of delivery?",
style: Theme.of(context).textTheme.subtitle,
),
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 5, left: 10),
child: DropdownButton<String>(
hint: Text(
"Please Select ",
style: TextStyle(
fontSize: 14,
),
),
items: <String>[
'Skinless Boneless, Full Loins',
'brown',
'silver'
].map((data) {
return DropdownMenuItem(
child: new Text(data,
style: Theme.of(context).textTheme.body1),
value: data,
);
}).toList(),
onChanged: (String newValue) {
setState(() {
_checkoutDropdownValue = newValue;
});
},
value: _checkoutDropdownValue,
),
)
],
),
],
),
),
);
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
child: Text("Click Here"),
onPressed: () {
showDialog(
context: context,
builder: (context) => _showCheckoutPopup(),
);
},
),
),
);
}
}
can you change your onPressed to print(_checkoutDropdownValue); instead of print(newValue); that way we can see if there is a problem with the assignment
I am developing a flutter based app and studied there are couple of ways to add splash screen. But I am not sure which one is the best to achieve.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:mingup/screen/login_screen.dart';
// This is the Splash Screen
class SplashScreen extends StatefulWidget {
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin{
AnimationController _animationController;
Animation<double> _animation;
#override
void initState() {
// TODO: implement initState
super.initState();
_animationController = new AnimationController(
vsync: this,
duration: new Duration(milliseconds: 500)
);
_animation = new CurvedAnimation(
parent: _animationController,
curve: Curves.easeOut,
);
_animation.addListener(()=> this.setState((){}));
_animationController.forward();
Timer(Duration(seconds: 10), (){
Navigator.push(context, MaterialPageRoute(builder: (context) => LoginScreen()));
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
child: Image.asset(
'images/splashscreenbg.png',
fit: BoxFit.cover,
)
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlutterLogo(
size: _animation.value * 100.0,
),
Padding(padding: EdgeInsets.only(top: 10.0)),
Text("MingUp", style: TextStyle(color: Colors.white, fontSize: 24.0, fontWeight: FontWeight.bold),)
],
),
),
),
]
)
],
),
);
}
}
You can add just a simple splash screen which can navigate to the next screen after 5 seconds.
import 'package:flutter/material.dart';
import 'dart:async';
class SplashScreen extends StatefulWidget {
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
#override
void initState() {
super.initState();
Timer(
Duration(seconds: 5),
() => Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => Home())));
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(20, 172, 168, 1),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.white,
radius: 60.0,
child: new Image.asset(
'assets/images/tree.jpg',
width: 70,
height: 90,
)),
Padding(
padding: EdgeInsets.only(top: 10.0),
),
Text(
'Your Text here!!',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0),
)
],
),
),
),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Padding(
padding: EdgeInsets.only(top: 20.0),
),
Text(
'Your Text here!!',
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white),
)
],
),
)
],
)
],
),
);
}
}