I am trying to make a align the heading(title) contents with the body that is the list item here. But it is not getting aligned. If I align it and reduce my screen size (I am using flutter web) it gives a render flex. If I use an expanded widget to align it it doesn't get itself aligned with the body (if I reduce it to half my screen). If I maximise my screen it s getting aligned
I want it to fit even I reduce the screen size.
How do I do it?
Here is the image:
Here is my code
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:http/http.dart';
import 'Postsc.dart';
late List<Post> drivers;
class MyApp extends StatefulWidget {
// to set the root of app.
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage1(),
);
}
}
class MyHomePage1 extends StatefulWidget {
late final String title;
#override
_MyHomePage1State createState() => _MyHomePage1State();
}
class _MyHomePage1State extends State<MyHomePage1> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Center(
child: Text("Customer Table",
style: TextStyle(
fontWeight: FontWeight.w900,
),
),
),
),
body:Container(
child: Column(
children: [
Row(
children: [
const Text('Cid',
style:TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)
),
( SizedBox(width:MediaQuery.of(context).size.width*0.225)),
const Text('Cname',
style:TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)
),
( SizedBox(width:MediaQuery.of(context).size.width*0.20) ),
const Text('Cadd',
style:TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)
),
( SizedBox(width:MediaQuery.of(context).size.width*0.22)),
const Text('Ctype',
style:TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)
),
]
),
Expanded(
child: Container(
child:_buildBody(context),
),
)
],
),
color:const Color(0xFF303030),
),
);
}
// build list view & manage states
FutureBuilder<List<Post>> _buildBody(BuildContext context) {
final HttpService httpService = HttpService();
return FutureBuilder<List<Post>>(
future: httpService.getPosts(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
final List<Post>? posts = snapshot.data; //marked
return _buildPosts(context, posts!);
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
);
}
// build list view & its tile
ListView _buildPosts(BuildContext context, List<Post> posts) {
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: posts.length,
itemBuilder: (context, index) {
return Container(
height:70,
child: Card(
shadowColor: Colors.white,
color:const Color(0xFF303030),
elevation: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
child: Text(posts[index].Cid,style: const TextStyle(fontWeight: FontWeight.bold,
color:Colors.white,),),
),
),
Expanded(
child: Container(
child: Text(posts[index].Cname,style: const TextStyle(fontWeight: FontWeight.bold,
color:Colors.white,),),
),),
Expanded(
child: Container(
child: Text(posts[index].Cadd,style: const TextStyle(fontWeight: FontWeight.bold,color:Colors.white,),
),
),
),
Expanded(
child: Container(
child: Text(posts[index].Ctype,style: const TextStyle(fontWeight: FontWeight.bold,color:Colors.white,),
),
),
),
],
),
),
);
},
);
}
}
class HttpService {
Future<List<Post>> getPosts() async {
Response res = await get(
Uri.parse('http://localhost/localconnect/customer_change.php'));
print(res.body);
if (res.statusCode == 200) {
List<dynamic> body = jsonDecode(res.body);
List<Post> posts = body.map(
(dynamic item) => Post.fromJson(item),
).toList();
return posts;
} else {
throw "Unable to retrieve posts.";
}
}
}
Use Expanded instead of using SizedBox and MediaQuery:.
Like so:
Row(
children: [
const Expanded(
child: Text(
'Cid',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
const Expanded(
child: Text(
'Cname',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
const Expanded(
child: Text(
'Cadd',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
const Expanded(
child: Text(
'Ctype',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
],
)
you can try Expanded widget except using of SizedBox
here is some code:
class MyHomePage1 extends StatefulWidget {
late final String title;
#override
_MyHomePage1State createState() => _MyHomePage1State();
}
class _MyHomePage1State extends State<MyHomePage1> {
List l = [
{"number": "1", "name": "warner", "place": 'sydney', "des": 'Regular customer'},
{"number": "1", "name": "warner", "place": 'sydney', "des": 'Regular customer'},
{"number": "1", "name": "warner", "place": 'sydney', "des": 'Regular customer'},
{"number": "1", "name": "warner", "place": 'sydney', "des": 'Regular customer'},
];
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Center(
child: Text(
"Customer Table",
style: TextStyle(
fontWeight: FontWeight.w900,
),
),
),
),
body: Container(
child: Column(
children: [
Row(
children: const [
Expanded(
child: Text('Cid',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)),
),
Expanded(
child: Text('Cname',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)),
),
Expanded(
child: Text('Cadd',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)),
),
Expanded(
child: Text('Ctype',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
)),
),
],
),
Expanded(
child: Column(
children: l
.map(
(e) => Row(
children: [
Expanded(
child: Text(
e['number'],
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
Expanded(
child: Text(
e['name'],
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
Expanded(
child: Text(
e['place'],
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
Expanded(
child: Text(
e['des'],
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.white,
),
),
),
],
),
)
.toList(),
),
)
],
),
color: const Color(0xFF303030),
),
);
}
}
Related
So its just a general question that I would like to know because I'm still new in flutter development. So I just want to know does update method have to be inside a form or it can just simply put inside a button for example like save for profile pages. Heres my profile page. if anyone knew how to implement update inside this page it would be helpful
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_user_profile/model/parking.dart';
class ParkingPage extends StatefulWidget {
#override
State<ParkingPage> createState() => _ParkingPageState();
}
class _ParkingPageState extends State<ParkingPage> {
User? user = FirebaseAuth.instance.currentUser;
Parking loginuser = Parking();
#override
void initState(){
super.initState();
FirebaseFirestore.instance
.collection('parkingTech')
.doc(user!.uid)
.get()
.then((value){
this.loginuser = Parking.fromMap(value.data());
setState(() {});
});
}
// #override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF121212),
appBar: AppBar(
backgroundColor: Color(0xFF121212),
elevation: 0.0,
title: Text('Parking Tech',
style:TextStyle(
color: Color(0xFFFFFFFF),
fontWeight: FontWeight.bold,
),
),
centerTitle:true,
actions: [
// Icon(Icons.menu,
// color:Colors.amber,
// size:40,
// )
]
),
body: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:[
Row(
mainAxisAlignment: MainAxisAlignment.center ,
children:[
CircleAvatar(
backgroundColor: Colors.amber,
radius: 100.0,
child: Center(
child: Text('P',
style:TextStyle(
fontSize: 80,
color: Color(0xFF121212),
fontWeight: FontWeight.bold,
),
),
)
),
],
),
SizedBox(height: 15),
Text("Parking time : ${loginuser.name} ",
style:TextStyle(
fontSize: 20,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 10),
Text('00 : 56 : 05',
style:TextStyle(
fontSize: 50,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 15),
Text('P15 AED',
style:TextStyle(
fontSize: 30,
color: Colors.blueGrey,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 15),
Text('On Parking ',
style:TextStyle(
fontSize: 15,
color: Colors.amber,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 15),
Text('End Parking',
style:TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 12),
Text('Extend Parking',
style:TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 12),
],
),
),
);
}
}
I am using sqflite to do inserts from OnCreate. Those inserts work fine, and i can visualice the items in a ListView:
But when I touch the item from that list, I get this error:
this is the code of my list that works okay, and where i send the object 'todo' to another screen:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//...
),
here i make conection bd, snapshot, and sending object 'todo':
body: FutureBuilder<List<todo>>(
future: _todo,
builder: (BuildContext context, AsyncSnapshot<List<todo>> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: const CircularProgressIndicator(),
);
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
var items = snapshot.data ?? <todo>[];
return Container(
margin: EdgeInsets.symmetric(
horizontal: 5.0,
vertical: 5.0,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
),
child: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
//HERE I SEND THE OBJECT 'todo' IN INDEX SELECTEDTO DETAILSCREEN
builder: (context) => DetailScreen(td: items[index]),
),
);
},
child: Card(
child: ListTile(
leading: SizedBox(
height: 100.0,
width: 80.0,
child: Image.network(items[index].imgcourse),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
title: Text(
items[index].title,
style: TextStyle(
fontSize: 20,
color: Colors.blueAccent,
),
),
)),
);
},
),
);
}
},
),
);
}
this is the DetailScreen where i receive the 'todo' object:
class DetailScreen extends StatelessWidget {
todo td;
DetailScreen({required this.td});
late DatabaseHandler handler;
late Future<List<todo>> _todo;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[850],
appBar: AppBar(
title: Text(
td.title,
style: TextStyle(
fontSize: 16.0, /*fontWeight: FontWeight.bold*/
),
),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.symmetric(
horizontal: 8,
),
color: Colors.grey[800],
child: SingleChildScrollView(
child: Column(
children: [
//NAME ITEM
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(vertical: 3, horizontal: 5),
child: RichText(
text: new TextSpan(
style: new TextStyle(
fontSize: 15.0,
color: Colors.white,
),
children: <TextSpan>[
new TextSpan(
text: 'Nombre: ',
style: new TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueAccent)),
new TextSpan(text: td.title),
],
),
),
),
SizedBox(
height: 10,
),
// DESCRIPTION TIEM
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 5.0),
child: RichText(
text: new TextSpan(
style: new TextStyle(
fontSize: 15.0,
color: Colors.white,
),
children: <TextSpan>[
new TextSpan(
text: 'Detalles: ',
style: new TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueAccent)),
new TextSpan(text: td.description),
],
),
),
),
],
),
),
);
),
);
}
}
this is my 'todo' class:
I would like to know how to receive the object and read items inside, im new in sqflite and flutter.
you don´t need to call again the FutureBuilder in "DetailsScream", you have already passed the parameter tb
class DetailScreen extends StatelessWidget {
todo td;
DetailScreen({required this.td});
late DatabaseHandler handler;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[850],
appBar: AppBar(
title: Text(
td.title,
style: TextStyle(
fontSize: 16.0, /*fontWeight: FontWeight.bold*/
),
),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.symmetric(
horizontal: 8,
),
color: Colors.grey[800],
child: SingleChildScrollView(
child: Column(
children: [
//NAME ITEM
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(vertical: 3, horizontal: 5),
child: RichText(
text: new TextSpan(
style: new TextStyle(
fontSize: 15.0,
color: Colors.white,
),
children: <TextSpan>[
new TextSpan(
text: 'Nombre: ',
style: new TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueAccent)),
new TextSpan(text: td.title),
],
),
),
),
SizedBox(
height: 10,
),
// DESCRIPTION TIEM
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 5.0),
child: RichText(
text: new TextSpan(
style: new TextStyle(
fontSize: 15.0,
color: Colors.white,
),
children: <TextSpan>[
new TextSpan(
text: 'Detalles: ',
style: new TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueAccent)),
new TextSpan(text: td.description),
],
),
),
),
],
),
),
),
);
}
}
Tell if this worked for you
I am trying to build an app which retrieves all the table data and display it on the screen.I have made it using a list builder widget .I wanted to add a header to each of the rows retrieved .I tried adding a row widget which contains the header.But it is not getting displayed .
Here is what the out List looks like
I wanted add did dname and age Header by making a row ..but its not visible
Here is what my code looks like
// build list view & its tile
ListView _buildPosts(BuildContext context, List<Post> posts) {
print('Hi');
Row(//This row is not getting displayed
children: [
Container(
child: const Text('Did',
style: TextStyle(
color: Colors.white,
),
),
),
Container(
child: const Text('Dname',style: TextStyle(
color: Colors.white,
),),
),
Container(
child: const Text('Age',style: TextStyle(
color: Colors.white,
),),
),
],
);
return ListView.builder(
itemCount: posts.length,
padding: const EdgeInsets.all(20),
itemBuilder: (context, index) {
return Card(
shadowColor: Colors.white,
color:const Color(0xFF303030),
elevation: 1,
child: IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(posts[index].Did,style: const TextStyle(fontWeight: FontWeight.bold,
color:Colors.white,),),
Text(posts[index].Dname,style: const TextStyle(fontWeight: FontWeight.bold,
color:Colors.white,),),
Text(posts[index].Age,style: const TextStyle(fontWeight: FontWeight.bold,color:Colors.white,),
),
],
),
),
);
},
);
}
}
class HttpService {
Future<List<Post>> getPosts() async {
Response res = await get(
Uri.parse('http://localhost/localconnect/driver_change.php'));
print(res.body);
if (res.statusCode == 200) {
List<dynamic> body = jsonDecode(res.body);
List<Post> posts = body.map(
(dynamic item) => Post.fromJson(item),
).toList();
return posts;
} else {
throw "Unable to retrieve posts.";
}
}
}
The problem is that the row isn't used anywhere. So instead of using this so called _buildPosts you can simply return a listView.builder. Checkout the code below:
I have added 2 sets of solutions below:
ListView.builder(
itemCount: posts.length,
itemBuilder: (context, index) {
return Card(
shadowColor: Colors.white,
color: const Color(0xFF303030),
elevation: 1,
child: IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Container(
child: const Text(
'Did',
style: TextStyle(
color: Colors.white,
),
),
),
Text(
posts[index].Did,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
Column(
children: [
Container(
child: const Text(
'Dname',
style: TextStyle(
color: Colors.white,
),
),
),
Text(
posts[index].Dname,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
Column(
children: [
Container(
child: const Text(
'Age',
style: TextStyle(
color: Colors.white,
),
),
),
Text(
posts[index].Age,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
],
),
),
);
},
),
This is the most simplest approach but as per your answer there is another complex approach:
ListView.builder(
itemCount: posts.length * 2,
itemBuilder: (context, index) {
if (index.isOdd) {
return Card(
shadowColor: Colors.white,
color: const Color(0xFF303030),
elevation: 1,
child: IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
posts[index*2].Did,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
posts[index*2].Dname,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
posts[index*2].Age,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
),
);
} else {
return Row(
//This row is not getting displayed
children: [
Container(
child: const Text(
'Did',
style: TextStyle(
color: Colors.white,
),
),
),
Container(
child: const Text(
'Dname',
style: TextStyle(
color: Colors.white,
),
),
),
Container(
child: const Text(
'Age',
style: TextStyle(
color: Colors.white,
),
),
),
],
);
}
},
),
It can't be displayed because it isn't used anywhere! Your _buildPosts() only returns Listview.builder().
Wrap your List view.builder() inside a Column, then move your Row() inside that Column() above Listview.builder().
The best and optimal solution for your case is use DataTable .It makes table data visualization so simple and it is very easy to use
#override
Widget build(BuildContext context) {
return DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'Did',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Dname',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('1')),
DataCell(Text('Raj')),
DataCell(Text('34')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(Text('43')),
DataCell(Text('Professor')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('William')),
DataCell(Text('27')),
DataCell(Text('Associate Professor')),
],
),
],
);
}
you can render a list into row like this
rows: _list.map((cita) => DataRow(
cells: [
DataCell(Text(_list.telefono ?? '',style: const
TextStyle(
fontSize: 18,color: Colors.black
))),
DataCell(Text(_list.nombre ?? '',style: const
TextStyle(
fontSize: 18,color: Colors.black
))),
DataCell(Text(_list.nombre ?? '',style: const
TextStyle(
fontSize: 18,color: Colors.black
))),
]
)
I know my answer is far away from your asking question but this is the best approach to handle data table in flutter
I'm new to Flutter and trying to clone an app to learn it. I create an intro look like this in real app: introduction screen in real app
And I use RichText to create that text but somehow it shows the code on the screen: introduction screen in my clone app
Here is the code:
class Body extends StatefulWidget {
const Body({Key? key}) : super(key: key);
#override
_BodyState createState() => _BodyState();
}
class _BodyState extends State<Body> {
int currentPage = 0;
final List<Map<String, Object>> _introductionData = [
{
"image": "assets/images/intro_1.png",
"title": "",
"text": RichText(
text: const TextSpan(
style: TextStyle(
fontSize: 12,
color: Colors.white,
),
children: [
TextSpan(
text: 'Sign in first time ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(text: 'success to get '),
TextSpan(
text: '50% off coupon ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(text: 'and '),
TextSpan(
text: 'lottery code ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(text: 'to join '),
TextSpan(
text: '"Download app, get big prize" ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(text: 'have a chance '),
TextSpan(
text: 'to win a smart tv ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(text: 'worth nearly 1000\$.')
],
),
),
},
{
"image": "assets/images/intro_2.png",
"title": "Super convenient online pharmacy",
"text": 'Full of great deals, free shipping from 13$. Accumulate Extracare points after every purchase.',
},
{
"image": "assets/images/intro_3.png",
"title": "Consult with a pharmacist online via video.",
"text": 'Advice on prescriptions and drug use from a team of highly qualified pharmacists.'
},
{
"image": "assets/images/intro_4.png",
"title": "Look up drug information and disease symptoms",
"text": 'Update the latest health information, look up information quickly and accurately.',
},
];
#override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
child: Stack(
fit: StackFit.expand,
children: [
Image.asset(
'assets/images/intro_background.png',
fit: BoxFit.cover,
height: double.infinity,
alignment: Alignment.topCenter,
),
Padding(
padding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 16.0),
child: Column(
children: [
Expanded(
flex: 6,
child: PageView.builder(
onPageChanged: (value) {
setState(() {
currentPage = value;
});
},
itemCount: _introductionData.length,
itemBuilder: (context, index) => IntroductionContent(
image: _introductionData[index]['image'].toString(),
title: _introductionData[index]['title'].toString(),
text: _introductionData[index]['text'].toString(),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: [
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(
_introductionData.length,
(index) => buildDot(index: index),
),
),
const Padding(padding: EdgeInsets.only(top: 25)),
DefaultButton(
text: 'Continue',
backgroundColor: Colors.white,
textColor: kPrimaryColor,
press: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext _context) =>
const AcceptTermsScreen(),
),
);
},
)
],
),
),
)
],
),
),
],
),
);
}
AnimatedContainer buildDot({int? index}) {
return AnimatedContainer(
duration: kAnimationDuration,
margin: const EdgeInsets.only(right: 15),
height: currentPage == index ? 6 : 4,
width: currentPage == index ? 6 : 4,
decoration: BoxDecoration(
color: currentPage == index
? Colors.white
: const Color(0x77FFFFFF),
borderRadius: BorderRadius.circular(3),
),
);
}
}
IntroductionContent code:
class IntroductionContent extends StatelessWidget {
const IntroductionContent({
Key? key,
this.title,
this.text,
this.image,
}) : super(key: key);
final String? title, text, image;
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
const Spacer(),
const Spacer(),
Image.asset(
image!,
height: 250,
),
const Spacer(),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
child: Text(
title!,
textAlign: TextAlign.center,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white,
),
),
),
const Padding(padding: EdgeInsets.only(top: 20)),
Text(
text!,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 12,
color: Colors.white,
height: 1.5,
),
),
],
);
}
}
Thanks in advance for help me fix that.
Change your text type string to RichText and in your pageView, remove the toString from the IntroductionContent text parameter.
PageView.build
PageView.builder(
onPageChanged: (value) {
setState(() {
currentPage = value;
});
},
itemCount: _introductionData.length,
itemBuilder: (context, index) => IntroductionContent(
image: _introductionData[index]['image'].toString(),
title: _introductionData[index]['title'].toString(),
text: _introductionData[index]['text'], // here changed need
),
),
IntroductionContent.class
class IntroductionContent extends StatelessWidget {
const IntroductionContent({
Key key,
this.title,
this.text,
this.image,
}) : super(key: key);
final String title, image;
final RichText text; // change text string to Richtext
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
const Spacer(),
const Spacer(),
Image.asset(
image,
height: 250,
),
const Spacer(),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
child: Text(
title,
textAlign: TextAlign.center,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white,
),
),
),
const Padding(padding: EdgeInsets.only(top: 20)),
text, // here just assign your text
],
);
}
}
output:
In flutter, I want to make an application that scans qr code and display the qr text.
I have two buttons, which are done, scan again.
And how to put that 2 button, bottom of that scan area. If i try to put that button inside expanded layer, it looks all red
Here is the code & screenshot.
How can i solve this ?
import 'package:flutter/material.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';
import 'package:qr_code_scanner/qr_scanner_overlay_shape.dart';
void main() => runApp(MaterialApp(home: QRSCAN()));
const flash_on = "FLASH ON";
const flash_off = "FLASH OFF";
const front_camera = "FRONT CAMERA";
const back_camera = "BACK CAMERA";
class QRSCAN extends StatefulWidget {
const QRSCAN({
Key key,
}) : super(key: key);
#override
State<StatefulWidget> createState() => _QRSCANState();
}
class _QRSCANState extends State<QRSCAN> {
bool Done_Button = false;
var qrText = "";
QRViewController controller;
final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.blueAccent),
onPressed: () {
Navigator.pop(context);
controller?.pauseCamera();
},
),
elevation: 0.0,
backgroundColor: Colors.white,
actions: <Widget>[
IconButton(
icon: Icon(Icons.help_outline, color: Colors.grey,),
onPressed: () {},
),
],
),
body: Column(
children: <Widget>[
Expanded(
child: QRView(
key: qrKey,
onQRViewCreated: _onQRViewCreated,
overlay: QrScannerOverlayShape(
borderColor: Colors.blueAccent,
borderRadius: 10,
borderLength: 130,
borderWidth: 5,
overlayColor: Color(0xff010040),
),
),
flex: 4,
),
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text("$qrText", style: TextStyle(color: Colors.black,),),
InkWell(
onTap: () async {
Navigator.pop(context);
},
child: Container(
width: 100.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(colors: [
Color(0xFF1E75BB),
Color(0xFF1EEABB),
])),
child: Center(
child: Text(
'Done',
style: TextStyle(
color: Colors.white,
letterSpacing: 1.5,
fontSize: 12.0,
fontWeight: FontWeight.bold,
fontFamily: 'Play',
),
),
),
),
),
SizedBox(
height: 25,
),
InkWell(
onTap: () async {
setState(() {
qrText = "";
controller?.resumeCamera();
Done_Button = false;
});
},
child: Container(
width: 100.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(colors: [
Color(0xFF1E75BB),
Color(0xFF1EEABB),
])),
child: Center(
child: Text(
'Again',
style: TextStyle(
color: Colors.white,
letterSpacing: 1.5,
fontSize: 12.0,
fontWeight: FontWeight.bold,
fontFamily: 'Play',
),
),
),
),
),
],
),
),
flex: 1,
),
],
),
);
}
_isFlashOn(String current) {
return flash_on == current;
}
_isBackCamera(String current) {
return back_camera == current;
}
void _onQRViewCreated(QRViewController controller) {
this.controller = controller;
controller.scannedDataStream.listen((scanData) {
setState(() {
qrText = scanData;
controller?.pauseCamera();
Done_Button = true;
});
});
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
}
you can refactor your code as follows
` Column(children: <Widget>[
/* QRView(
key: qrKey,
onQRViewCreated: _onQRViewCreated,
overlay: QrScannerOverlayShape(
borderColor: Colors.blueAccent,
borderRadius: 10,
borderLength: 130,
borderWidth: 5,
overlayColor: Color(0xff010040),
),
),*/
SizedBox(height:5),
Center(
child: Container(height: 100, color: Colors.white, width: 100),
),
Text(
"$qrText",
style: TextStyle(
color: Colors.black,
),
),
InkWell(
onTap: () async {
Navigator.pop(context);
},
child: Container(
width: 100.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(colors: [
Color(0xFF1E75BB),
Color(0xFF1EEABB),
])),
child: Center(
child: Text(
'Done',
style: TextStyle(
color: Colors.white,
letterSpacing: 1.5,
fontSize: 12.0,
fontWeight: FontWeight.bold,
fontFamily: 'Play',
),
),
),
),
),
SizedBox(
height: 25,
),
InkWell(
onTap: () async {
setState(() {
qrText = "";
// controller?.resumeCamera();
// Done_Button = false;
});
},
child: Container(
width: 100.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(colors: [
Color(0xFF1E75BB),
Color(0xFF1EEABB),
])),
child: Center(
child: Text(
'Again',
style: TextStyle(
color: Colors.white,
letterSpacing: 1.5,
fontSize: 12.0,
fontWeight: FontWeight.bold,
fontFamily: 'Play',
),
),
),
),
),
]),
);`