Flutter null safety constructor - flutter

I am using flutter's latest(null safety) version and I created a constructor.
This code does not show anything on the screen. Why can't I see icons and text?
import 'package:flutter/material.dart';
import 'input_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.lightBlue[300],//app bar ın rengi
scaffoldBackgroundColor: Colors.lightBlue[300],//scfold un body si
),
home: InputPage(),
);
}
}
following code input_page.dart
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'YAŞAM BEKLENTİSİ',
style: TextStyle(color: Colors.black54),
),
centerTitle: true,
),
body: Column(
children: <Widget>[
Expanded(
child: Row(
children: [
Expanded(
child: MyContainer(),
),
Expanded(
child: MyContainer(),
),
],
),
),
Expanded(
child: MyContainer(),
),
Expanded(
child: MyContainer(),
),
Expanded(
child: Row(
children: [
Expanded(
child: MyContainer(
child: Column(
children: <Widget>[
Icon(
(FontAwesomeIcons.venus),
size: 50,
color: Colors.black54,
),
Text("KADIN"),
],
),
),
),
Expanded(
child: MyContainer(),
),
],
),
),
],
),
);
}
}
class MyContainer extends StatelessWidget {
final Color color;
final Widget? child;
MyContainer({this.color = Colors.white, this.child});
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(12),
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(10), color: color),
);
}

That's because you didn't provide child to your Container.
class MyContainer extends StatelessWidget {
final Color color;
final Widget? child;
MyContainer({this.color = Colors.white, this.child});
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(12),
decoration: BoxDecoration(...),
child: child, // <-- Missing
);
}
}

Related

flutter bottomsheet with overlay button on top

Can someone give guidance on how to create a bottomsheet with a button on top like below?
I think typically we should be able to achieve it using a stack widget. But not sure how to do this with a bottomsheet. Thanks for your help.
Here is code:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test Bottom Sheet app',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo '),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(child: Text("Body"),),
bottomSheet:getBottomSheet() , //Main Center
); //Scaffold
}
Widget getBottomSheet(){
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 30, left: 8.0, right: 8.0),
child: Card(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView(
shrinkWrap: true,
children: [
Padding(
padding: const EdgeInsets.only(top:20.0),
child: SizedBox(height: 50, child: Text("Postpone Start")),
),
SizedBox(height: 50, child: Text("Postpone Start")),
SizedBox(height: 50, child: Text("Postpone Start")),
],),
),
),
),
Row(
children: [
Card(
color: Colors.orange,
child: FlatButton(onPressed: (){}, child: Text("Header"))),
],
),
],
),
],
);
}
}

Flutter: How to create a beautiful Curve oval shape Container / Divider between other widgets in Flutter

How to create this beautiful curve shape divider in a flutter App.
Simply use this customDivider as your divider
customDivider(String title) {
return Row(
children: [
Expanded(
child: Container(
color: Colors.white,
height: 10,
),
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(13),
color: Colors.white,
),
child: Center(child: Text(title)),
),
Expanded(
child: Container(
color: Colors.white,
height: 10,
),
),
],
);
}
Here is an example
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(
title: Text(widget.title),
),
body: ListView.builder(
itemCount: 5,
shrinkWrap: true,
itemBuilder: (context, index) => listItem(index),
),
);
}
customDivider(String title) {
return Row(
children: [
Expanded(
child: Container(
color: Colors.white,
height: 10,
),
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(13),
color: Colors.white,
),
child: Center(child: Text(title)),
),
Expanded(
child: Container(
color: Colors.white,
height: 10,
),
),
],
);
}
listItem(int index) {
return Column(
children: [
Container(
height: 200,
width: 200,
margin: EdgeInsets.all(10),
color: index.isEven ? Colors.orange : Colors.deepPurpleAccent,
),
customDivider("your title"),
],
);
}
}
OUTPUT:
There can be many ways to do this in flutter. This is one of the simplest approach.
main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: SO(),
),
);
}
}
class SO extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink.shade100,
appBar: AppBar(),
body: Center(
child: CapsuleWidget(
label: 'organizing data'.toUpperCase(),
ribbonHeight: 8,
),
),
);
}
}
class CapsuleWidget extends StatelessWidget {
final Color fillColor;
final Color textColor;
final String label;
final double ribbonHeight;
final double ribbonRadius;
const CapsuleWidget({
Key key,
this.fillColor = Colors.white,
this.textColor = Colors.black,
#required this.label,
#required this.ribbonHeight,
this.ribbonRadius = 1000,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Expanded(
child: Container(
height: ribbonHeight,
color: fillColor,
),
),
Container(
decoration: BoxDecoration(color: fillColor, borderRadius: BorderRadius.circular(ribbonRadius)),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Text(
label,
style: TextStyle(color: textColor, fontWeight: FontWeight.w500),
),
),
),
Expanded(
child: Container(
height: ribbonHeight,
color: fillColor,
),
),
],
);
}
}
it use Stack class
link url : https://api.flutter.dev/flutter/widgets/Stack-class.html
pseudo code
Stack {
Container(), // background
Contanier(), // white Line
Text() , // center Text
}

Flutter widgets are not showing any thing

I'm working on an assignment and my Flutter app suppose to show Text and FontAwesome's Fonts. But widgets are not showing anything and the Android Studio also showing no error and no exceptions..Here is my displaying class code.
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'icon_reuse.dart';
import 'reuseable_card.dart';
import 'constants.dart';
enum Gender{
male, female,
}
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
Gender selectedGender;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('BMI CALCULATOR'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: ReUseAbleCard(
onPress: (){
setState(() {
selectedGender = Gender.male;
});
},
colour: selectedGender == Gender.male ? kActiveCardColor : kInactiveCardColor,
cardIcons:
IconReuse(icons: FontAwesomeIcons.mars, gender: 'MALE'),
),
),
Expanded(
child: ReUseAbleCard(
onPress: (){
setState(() {
selectedGender = Gender.female;
});
},
colour: selectedGender == Gender.female? kActiveCardColor: kInactiveCardColor,
cardIcons: IconReuse(
icons: FontAwesomeIcons.venus, gender: 'FEMALE'),
),
),
],
),
),
Container(
color: kBottomCardColor,
height: kBottomCardHeight,
width: double.infinity,
),
],
),
);
}
}
and my reuseable_card class is:
import 'package:flutter/material.dart';
class ReUseAbleCard extends StatelessWidget {
ReUseAbleCard({#required this.colour, this.cardIcons,this.onPress});
final Widget cardIcons;
final Color colour;
final Function onPress;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress,
child: Container(
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: colour,
borderRadius: BorderRadius.circular(10.0),
),
),
);
}
}
and icon_class:
import 'package:flutter/material.dart';
import 'constants.dart';
class IconReuse extends StatelessWidget {
IconReuse({ this.icons, this.gender});
final IconData icons;
final String gender;
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
icons,
size: 80,
),
SizedBox(
height: 10.0,
),
Text(
gender,
style: kTextLabelStyle,
),
],
);
}
}
and the constant class:
import 'package:flutter/material.dart';
const kActiveCardColor = Color(0xFF1D1E33);
const kInactiveCardColor = Color(0xFF111328);
const kBottomCardColor = Color(0xFFEB1555);
const kBottomCardHeight = 80.0;
const kTextLabelStyle = TextStyle(
fontSize: 18.0,
color: Color(0xFF8D8E98),
);
and the main class:
import 'package:flutter/material.dart';
import 'input_page.dart';
void main() => runApp(BMICalculator());
class BMICalculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
primaryColor: Color(0xFF0A0E21),
scaffoldBackgroundColor: Color(0xFF0A0E21),
),
home: InputPage(),
);
}
}
I have add fontAwesome dependencies in pubspec.yaml file..
I did Delete app many times.
I did clean the Flutter
but not understanding what is worng..
You can copy paste run full code below
You forgot to add cardIcons as child of Container
code snippet
return GestureDetector(
onTap: onPress,
child: Container(
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: colour,
borderRadius: BorderRadius.circular(10.0),
),
child: cardIcons,
),
);
working demo
full code
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
const kActiveCardColor = Color(0xFF1D1E33);
const kInactiveCardColor = Color(0xFF111328);
const kBottomCardColor = Color(0xFFEB1555);
const kBottomCardHeight = 80.0;
const kTextLabelStyle = TextStyle(
fontSize: 18.0,
color: Color(0xFF8D8E98),
);
void main() => runApp(BMICalculator());
class BMICalculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
primaryColor: Color(0xFF0A0E21),
scaffoldBackgroundColor: Color(0xFF0A0E21),
),
home: InputPage(),
);
}
}
class IconReuse extends StatelessWidget {
IconReuse({this.icons, this.gender});
final IconData icons;
final String gender;
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
icons,
size: 80,
),
SizedBox(
height: 10.0,
),
Text(
gender,
style: kTextLabelStyle,
),
],
);
}
}
class ReUseAbleCard extends StatelessWidget {
ReUseAbleCard({#required this.colour, this.cardIcons, this.onPress});
final Widget cardIcons;
final Color colour;
final Function onPress;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress,
child: Container(
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: colour,
borderRadius: BorderRadius.circular(10.0),
),
child: cardIcons,
),
);
}
}
enum Gender {
male,
female,
}
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
Gender selectedGender;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('BMI CALCULATOR'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: ReUseAbleCard(
onPress: () {
setState(() {
selectedGender = Gender.male;
});
},
colour: selectedGender == Gender.male
? kActiveCardColor
: kInactiveCardColor,
cardIcons:
IconReuse(icons: FontAwesomeIcons.mars, gender: 'MALE'),
),
),
Expanded(
child: ReUseAbleCard(
onPress: () {
setState(() {
selectedGender = Gender.female;
});
},
colour: selectedGender == Gender.female
? kActiveCardColor
: kInactiveCardColor,
cardIcons: IconReuse(
icons: FontAwesomeIcons.venus, gender: 'FEMALE'),
),
),
],
),
),
Container(
color: kBottomCardColor,
height: kBottomCardHeight,
width: double.infinity,
),
],
),
);
}
}

How to add multiple String using Constructor class in Flutter

I made two widgets and called them in main.dart. I want the AntiRaggingCell widget in HomePage class to take in details of different Strings like Name, Label, Department, Phone No., Contact and Email. What my code does now is that I have to put in every detail in AntiRaggingDetailChip so the code becomes messy.
My code,
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
final Color antiRaggingCellBorderColor = Color(0xFFE6E6E6);
final Color chipBackgroundColor = Color(0xFFF6F6F6);
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Squad',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Squad'),
),
body: SafeArea(
child: ListView.builder(
itemBuilder: (context, index) {
return Column(
children: <Widget>[
AntiRaggingCell(),
AntiRaggingCell(),
AntiRaggingCell(),
AntiRaggingCell(),
AntiRaggingCell(),
],
);
},
shrinkWrap: true,
itemCount: 1,
physics: ClampingScrollPhysics(),
),
),
);
}
}
class AntiRaggingCell extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
border: Border.all(color: Colors.black),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Center(
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
spacing: 8.0,
children: <Widget>[
AntiRaggingDetailChip(Icons.person, 'Maruf Hassan'),
AntiRaggingDetailChip(Icons.label, 'Chairman'),
AntiRaggingDetailChip(Icons.mail, 'maruf#gmail.com'),
AntiRaggingDetailChip(Icons.phone, '1234567890'),
Center(
child: AntiRaggingDetailChip(Icons.account_balance,
'Computer Science & Engineering'),
),
],
),
),
],
),
),
),
),
],
);
}
}
class AntiRaggingDetailChip extends StatelessWidget {
final IconData iconData;
final String label;
AntiRaggingDetailChip(this.iconData, this.label);
#override
Widget build(BuildContext context) {
return RawChip(
label: Text(label),
labelStyle: TextStyle(color: Colors.black, fontSize: 14.0),
backgroundColor: chipBackgroundColor,
avatar: Icon(iconData),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
);
}
}
I want this code to take input like this
body: SafeArea(
child: ListView.builder(
itemBuilder: (context, index) {
return Column(
children: <Widget>[
AntiRaggingCell('Aman Khan','Member','abc#gmail.com','123545894', 'MTECH'),
AntiRaggingCell('Wasim Khan','President','abc#gmail.com','123545894'),
AntiRaggingCell('Afzal Khan','Member','abc#gmail.com','123545894'),
AntiRaggingCell('Arman Khan','Member','abc#gmail.com','123545894'),
AntiRaggingCell('Kalam Khan','Member','abc#gmail.com','123545894'),
],
);
},
simply add a constructor with the parameters you want.
Here is an example
final name;
final email;
const MyApp({Key key, this.name, this.email}) : super(key: key);
import 'package:flutter/material.dart';
class AntiRaggingCell extends StatelessWidget {
final String name;
final String position;
final String email;
final String phone;
final String org;
AntiRaggingCell(this.name, this.position, this.email, this.phone, {this.org});
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
border: Border.all(color: Colors.black),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Center(
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
spacing: 8.0,
children: <Widget>[
AntiRaggingDetailChip(Icons.person, 'Maruf Hassan'),
AntiRaggingDetailChip(Icons.label, 'Chairman'),
AntiRaggingDetailChip(Icons.mail, 'maruf#gmail.com'),
AntiRaggingDetailChip(Icons.phone, '1234567890'),
Center(
child: AntiRaggingDetailChip(Icons.account_balance,
'Computer Science & Engineering'),
),
],
),
),
],
),
),
),
),
],
);
}
}
Call this class like this:
children: <Widget>[
AntiRaggingCell('Aman Khan','Member','abc#gmail.com','123545894', org:'MTECH'),
AntiRaggingCell('Wasim Khan','President','abc#gmail.com','123545894'),
AntiRaggingCell('Afzal Khan','Member','abc#gmail.com','123545894'),
AntiRaggingCell('Arman Khan','Member','abc#gmail.com','123545894'),
AntiRaggingCell('Kalam Khan','Member','abc#gmail.com','123545894'),
],
);
If you need more field like this just put them into the angular bracket.
I found the answer. Just needed to declare constructor and call it.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
final Color antiRaggingCellBorderColor = Color(0xFFE6E6E6);
final Color chipBackgroundColor = Color(0xFFF6F6F6);
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Squad',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Anti-Ragging Squad'),
),
body: SafeArea(
child: ListView.builder(
itemBuilder: (context, index) {
return Column(
children: <Widget>[
AntiRaggingCell(name: 'Maruf Hassan', position: 'Chairman',email: 'maruf#gmail.com',phone: '012354695425', dept: 'Mathematics & Statistics',),
AntiRaggingCell(),
],
);
},
shrinkWrap: true,
itemCount: 1,
physics: ClampingScrollPhysics(),
),
),
);
}
}
class AntiRaggingCell extends StatelessWidget {
final String name;
final String position;
final String email;
final String phone;
final String dept;
AntiRaggingCell({this.name, this.position, this.email, this.phone, this.dept});
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
border: Border.all(color: Colors.black),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Center(
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
spacing: 8.0,
children: <Widget>[
AntiRaggingDetailChip(Icons.person, name),
AntiRaggingDetailChip(Icons.label, position),
AntiRaggingDetailChip(Icons.mail, email),
AntiRaggingDetailChip(Icons.phone, phone),
Center(child: AntiRaggingDetailChip(Icons.account_balance, dept),
),
],
),
),
],
),
),
),
),
],
);
}
}
class AntiRaggingDetailChip extends StatelessWidget {
final IconData iconData;
final String label;
AntiRaggingDetailChip(this.iconData, this.label);
#override
Widget build(BuildContext context) {
return RawChip(
label: Text(label),
labelStyle: TextStyle(color: Colors.black, fontSize: 14.0),
backgroundColor: chipBackgroundColor,
avatar: Icon(iconData),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
);
}
}

Why adding TextFiled from StatefulWidget won't appear?

I'm new on Fultter and have the following issue.
I have the following code that works as expected if I disable ShowTextField(), . If I enable ShowTextField(), line then some widgets will disappear and the TextField will not appear too.
1) What could be the reason for that ?
2) Is it correct to "call" StateFulWidget from StatelessWidget ?
Thanks in advance
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter layout demo2',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter layout demo3'),
),
body: Column(
children: <Widget>[
titleSection,
ShowTextField(), //Disable this line will make code work.
],
),
),
);
}
}
class ShowTextField extends StatefulWidget {
#override
_ShowTextFieldState createState() => _ShowTextFieldState();
}
class _ShowTextFieldState extends State<ShowTextField> {
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
color: Colors.red,
child: Container(
padding: const EdgeInsets.all(10),
child: Center(
child: Column(
children: <Widget>[
new TextField(
decoration: InputDecoration(
labelText: 'Hello world',
),
),
],
),
),
),
)
],
);
}
}
1.)The error message says: 'An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.' Then this will work:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter layout demo2',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter layout demo3'),
),
body: Column(
children: <Widget>[
titleSection,
ShowTextField(), //Disable this line will make code work.
],
),
),
);
}
}
class ShowTextField extends StatefulWidget {
#override
_ShowTextFieldState createState() => _ShowTextFieldState();
}
class _ShowTextFieldState extends State<ShowTextField> {
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
color: Colors.red,
child: Container(
width: 300.0, //<--- SET THE WIDTH
padding: const EdgeInsets.all(10),
child: Center(
child: Column(
children: <Widget>[
new TextField(
decoration: InputDecoration(
labelText: 'Hello world',
),
),
],
),
),
),
)
],
);
}
}
2.) Yes, perfectly fine.