Post Detail
Post #90
Flutter Jour Trois
Flutter application Dépenses personnelles
Disclaimer: This post is in French because it’s for French talking people, but when I’ll add multiple language this will be used in the French version and the English will be in the English version.
Point Trois
Fin du point trois !
Le Fichier main.dart P3
1/// main.dart
2
3import 'package:flutter/material.dart';
4import './widgets/user_transaction.dart';
5
6void main() => runApp(MyApp());
7
8class MyApp extends StatelessWidget {
9 @override
10 Widget build(BuildContext context) {
11 return MaterialApp(
12 title: 'Dépenses personnelles',
13 home: MyHomePage(),
14 );
15 }
16}
17
18class MyHomePage extends StatelessWidget {
19 final titleController = TextEditingController();
20 final amountController = TextEditingController();
21
22 @override
23 Widget build(BuildContext context) {
24 return Scaffold(
25 appBar: AppBar(
26 title: Text('Dépenses personnelles'),
27 ),
28 body: Column(
29 mainAxisAlignment: MainAxisAlignment.start,
30 crossAxisAlignment: CrossAxisAlignment.stretch,
31 children: <Widget>[
32 Card(
33 child: Text('GRAPHIQUES'),
34 color: Colors.blue,
35 ),
36 Card(
37 child: UserTransaction(),
38 ),
39 ],
40 ),
41 );
42 }
43}
Le Fichier user_transaction.dart P3
1/// ./widgets/user_transaction.dart
2
3import 'package:flutter/material.dart';
4
5import '../models/transaction.dart';
6
7import './new_transaction.dart';
8import './transaction_list.dart';
9
10class UserTransaction extends StatefulWidget {
11 @override
12 _UserTransactionState createState() => _UserTransactionState();
13}
14
15class _UserTransactionState extends State<UserTransaction> {
16 final List<Transaction> _userTransactions = [
17 Transaction(
18 id: 't1',
19 title: 'Chaussures',
20 amount: 169.99,
21 date: DateTime.now(),
22 ),
23 Transaction(
24 id: 't2',
25 title: 'Courses',
26 amount: 128.50,
27 date: DateTime.now(),
28 ),
29 ];
30
31 @override
32 Widget build(BuildContext context) {
33 return Column(
34 children: <Widget>[
35 NewTransaction(),
36 TransactionList(_userTransactions),
37 ],
38 );
39 }
40}
Le Fichier new_transaction.dart P3
1/// ./widgets/new_transaction.dart
2
3import 'package:flutter/material.dart';
4
5class NewTransaction extends StatelessWidget {
6 final titleController = TextEditingController();
7 final amountController = TextEditingController();
8
9 @override
10 Widget build(BuildContext context) {
11 return Card(
12 child: Container(
13 padding: EdgeInsets.all(10),
14 child: Column(
15 crossAxisAlignment: CrossAxisAlignment.end,
16 children: <Widget>[
17 TextField(
18 decoration: InputDecoration(
19 labelText: 'Titre',
20 ),
21 controller: titleController,
22 ),
23 TextField(
24 decoration: InputDecoration(
25 labelText: 'Montant',
26 ),
27 controller: amountController,
28 ),
29 FlatButton(
30 child: Text(
31 'Ajouter la Transaction',
32 ),
33 textColor: Colors.purple,
34 onPressed: () {
35 print(titleController.text);
36 print(amountController.text);
37 },
38 ),
39 ],
40 ),
41 ),
42 );
43 }
44}
Le Fichier transaction_list.dart P3
1/// ./widgets/transaction_list.dart
2
3import 'package:flutter/material.dart';
4import 'package:intl/intl.dart';
5
6import '../models/transaction.dart';
7
8class TransactionList extends StatelessWidget {
9 final List<Transaction> transactions;
10 TransactionList(this.transactions);
11
12 @override
13 Widget build(BuildContext context) {
14 return Container(
15 child: Column(
16 children: transactions.map((transaction) {
17 return Card(
18 child: Row(
19 children: <Widget>[
20 Container(
21 margin: EdgeInsets.symmetric(
22 vertical: 10,
23 horizontal: 15,
24 ),
25 decoration: BoxDecoration(
26 border: Border.all(
27 color: Colors.purple,
28 width: 2,
29 ),
30 ),
31 padding: EdgeInsets.all(10),
32 child: Text(
33 '\$: ${transaction.amount}'.toString(),
34 style: TextStyle(
35 fontWeight: FontWeight.bold,
36 fontSize: 20,
37 color: Colors.purple,
38 ),
39 ),
40 ),
41 Column(
42 crossAxisAlignment: CrossAxisAlignment.start,
43 children: <Widget>[
44 Text(
45 transaction.title,
46 style: TextStyle(
47 fontWeight: FontWeight.bold,
48 fontSize: 16,
49 ),
50 ),
51 Text(
52 DateFormat('dd MMM yyyy').format(transaction.date),
53 style: TextStyle(
54 color: Colors.grey,
55 ),
56 ),
57 ],
58 ),
59 ],
60 ),
61 );
62 }).toList(),
63 ),
64 );
65 }
66}
Le fichier transaction.dart (model de transaction) P3
1/// ./models/transaction.dart
2
3import 'package:flutter/foundation.dart';
4
5class Transaction {
6 final String id;
7 final String title;
8 final double amount;
9 final DateTime date;
10
11 Transaction({
12 @required this.id,
13 @required this.title,
14 @required this.amount,
15 @required this.date,
16 });
17}
Point Quatre
Point Quatre
Le Fichier main.dart P4
1/// main.dart
2
3import 'package:flutter/material.dart';
4import './widgets/user_transaction.dart';
5
6void main() => runApp(MyApp());
7
8class MyApp extends StatelessWidget {
9 @override
10 Widget build(BuildContext context) {
11 return MaterialApp(
12 title: 'Dépenses personnelles',
13 home: MyHomePage(),
14 );
15 }
16}
17
18class MyHomePage extends StatelessWidget {
19 final titleController = TextEditingController();
20 final amountController = TextEditingController();
21
22 @override
23 Widget build(BuildContext context) {
24 return Scaffold(
25 appBar: AppBar(
26 title: Text('Dépenses personnelles'),
27 ),
28 body: SingleChildScrollView(
29 child: Column(
30 mainAxisAlignment: MainAxisAlignment.start,
31 crossAxisAlignment: CrossAxisAlignment.stretch,
32 children: <Widget>[
33 Card(
34 child: Text('GRAPHIQUES'),
35 color: Colors.blue,
36 ),
37 Card(
38 child: UserTransaction(),
39 ),
40 ],
41 ),
42 ),
43 );
44 }
45}
Le Fichier user_transaction.dart P4
1/// ./widgets/user_transaction.dart
2
3import 'package:flutter/material.dart';
4
5import '../models/transaction.dart';
6
7import './new_transaction.dart';
8import './transaction_list.dart';
9
10class UserTransaction extends StatefulWidget {
11 @override
12 _UserTransactionState createState() => _UserTransactionState();
13}
14
15class _UserTransactionState extends State<UserTransaction> {
16 final List<Transaction> _userTransactions = [
17 Transaction(
18 id: 't1',
19 title: 'Chaussures',
20 amount: 169.99,
21 date: DateTime.now(),
22 ),
23 Transaction(
24 id: 't2',
25 title: 'Courses',
26 amount: 128.50,
27 date: DateTime.now(),
28 ),
29 ];
30
31 void _addNewTransaction(String newTitle, double newAmount) {
32 final newTransaction = Transaction(
33 title: newTitle,
34 amount: newAmount,
35 date: DateTime.now(),
36 id: DateTime.now().toString());
37
38 setState(() {
39 _userTransactions.add(newTransaction);
40 });
41 }
42
43 @override
44 Widget build(BuildContext context) {
45 return Column(
46 children: <Widget>[
47 NewTransaction(_addNewTransaction),
48 TransactionList(_userTransactions),
49 ],
50 );
51 }
52}
Le Fichier new_transaction.dart P4
1/// ./widgets/new_transaction.dart
2
3import 'package:flutter/material.dart';
4
5class NewTransaction extends StatelessWidget {
6 final Function addNewTransaction;
7
8 NewTransaction(this.addNewTransaction);
9
10 final titleController = TextEditingController();
11 final amountController = TextEditingController();
12
13 @override
14 Widget build(BuildContext context) {
15 return Card(
16 child: Container(
17 padding: EdgeInsets.all(10),
18 child: Column(
19 crossAxisAlignment: CrossAxisAlignment.end,
20 children: <Widget>[
21 TextField(
22 decoration: InputDecoration(
23 labelText: 'Titre',
24 ),
25 controller: titleController,
26 ),
27 TextField(
28 decoration: InputDecoration(
29 labelText: 'Montant',
30 ),
31 controller: amountController,
32 ),
33 FlatButton(
34 child: Text(
35 'Ajouter la Transaction',
36 ),
37 textColor: Colors.purple,
38 onPressed: () {
39 addNewTransaction(
40 titleController.text,
41 double.parse(amountController.text),
42 );
43 },
44 ),
45 ],
46 ),
47 ),
48 );
49 }
50}
Le Fichier transaction_list.dart P4
1/// ./widgets/transaction_list.dart
2
3import 'package:flutter/material.dart';
4import 'package:intl/intl.dart';
5
6import '../models/transaction.dart';
7
8class TransactionList extends StatelessWidget {
9 final List<Transaction> transactions;
10 TransactionList(this.transactions);
11
12 @override
13 Widget build(BuildContext context) {
14 return Container(
15 height: 300,
16 child: ListView.builder(
17 itemBuilder: (context, index) {
18 return Card(
19 child: Row(
20 children: <Widget>[
21 Container(
22 margin: EdgeInsets.symmetric(
23 vertical: 10,
24 horizontal: 15,
25 ),
26 decoration: BoxDecoration(
27 border: Border.all(
28 color: Colors.purple,
29 width: 2,
30 ),
31 ),
32 padding: EdgeInsets.all(10),
33 child: Text(
34 '\$: ${transactions[index].amount}'.toString(),
35 style: TextStyle(
36 fontWeight: FontWeight.bold,
37 fontSize: 20,
38 color: Colors.purple,
39 ),
40 ),
41 ),
42 Column(
43 crossAxisAlignment: CrossAxisAlignment.start,
44 children: <Widget>[
45 Text(
46 transactions[index].title,
47 style: TextStyle(
48 fontWeight: FontWeight.bold,
49 fontSize: 16,
50 ),
51 ),
52 Text(
53 DateFormat('dd MMM yyyy')
54 .format(transactions[index].date),
55 style: TextStyle(
56 color: Colors.grey,
57 ),
58 ),
59 ],
60 ),
61 ],
62 ),
63 );
64 },
65 itemCount: transactions.length,
66 ),
67 );
68 }
69}
Le fichier transaction.dart (model de transaction) P4
1/// ./models/transaction.dart
2
3import 'package:flutter/foundation.dart';
4
5class Transaction {
6 final String id;
7 final String title;
8 final double amount;
9 final DateTime date;
10
11 Transaction({
12 @required this.id,
13 @required this.title,
14 @required this.amount,
15 @required this.date,
16 });
17}
Point Dix
Point Dix
Le Fichier main.dart P10
1/// main.dart
2
3import 'package:depenses/widgets/transaction_list.dart';
4import 'package:flutter/material.dart';
5
6import './models/transaction.dart';
7
8import './widgets/new_transaction.dart';
9
10void main() => runApp(MyApp());
11
12class MyApp extends StatelessWidget {
13 @override
14 Widget build(BuildContext context) {
15 return MaterialApp(
16 title: 'Dépenses personnelles',
17 theme: ThemeData(
18 primarySwatch: Colors.purple,
19 accentColor: Colors.amber,
20 fontFamily: 'Quicksand',
21 appBarTheme: AppBarTheme(
22 textTheme: ThemeData.light().textTheme.copyWith(
23 title: TextStyle(
24 fontFamily: 'OpenSans',
25 fontWeight: FontWeight.bold,
26 fontSize: 18,
27 ),
28 ),
29 ),
30 ),
31 home: MyHomePage(),
32 );
33 }
34}
35
36class MyHomePage extends StatefulWidget {
37 @override
38 _MyHomePageState createState() => _MyHomePageState();
39}
40
41class _MyHomePageState extends State<MyHomePage> {
42 final titleController = TextEditingController();
43 final amountController = TextEditingController();
44
45 final List<Transaction> _userTransactions = [
46 Transaction(
47 id: 't1',
48 title: 'Chaussures',
49 amount: 169.99,
50 date: DateTime.now(),
51 ),
52 Transaction(
53 id: 't2',
54 title: 'Courses',
55 amount: 128.50,
56 date: DateTime.now(),
57 ),
58 ];
59
60 void _addNewTransaction(String newTitle, double newAmount) {
61 final newTransaction = Transaction(
62 title: newTitle,
63 amount: newAmount,
64 date: DateTime.now(),
65 id: DateTime.now().toString());
66
67 setState(() {
68 _userTransactions.add(newTransaction);
69 });
70 }
71
72 void _startAddNewTransaction(BuildContext context) {
73 showModalBottomSheet(
74 context: context,
75 builder: (_) {
76 return NewTransaction(_addNewTransaction);
77 });
78 }
79
80 @override
81 Widget build(BuildContext context) {
82 return Scaffold(
83 appBar: AppBar(
84 title: Text('Dépenses personnelles'),
85 actions: <Widget>[
86 IconButton(
87 icon: Icon(Icons.add),
88 onPressed: () => _startAddNewTransaction(context),
89 ),
90 ],
91 ),
92 body: SingleChildScrollView(
93 child: Column(
94 mainAxisAlignment: MainAxisAlignment.start,
95 crossAxisAlignment: CrossAxisAlignment.stretch,
96 children: <Widget>[
97 Card(
98 child: Text('GRAPHIQUES'),
99 color: Colors.blue,
100 ),
101 TransactionList(_userTransactions),
102 ],
103 ),
104 ),
105 floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
106 floatingActionButton: FloatingActionButton(
107 child: Icon(
108 Icons.add,
109 ),
110 onPressed: () => _startAddNewTransaction(context),
111 ),
112 );
113 }
114}
Le Fichier user_transaction.dart P10
SUPPRIMÉ
Le Fichier new_transaction.dart P10
1/// ./widgets/new_transaction.dart
2
3import 'package:flutter/material.dart';
4
5class NewTransaction extends StatefulWidget {
6 final Function addNewTransaction;
7
8 NewTransaction(this.addNewTransaction);
9
10 @override
11 _NewTransactionState createState() => _NewTransactionState();
12}
13
14class _NewTransactionState extends State<NewTransaction> {
15 final titleController = TextEditingController();
16
17 final amountController = TextEditingController();
18
19 void submitData() {
20 final enteredTitle = titleController.text;
21 final enteredAmount = double.parse(amountController.text);
22
23 if (enteredTitle.isEmpty || enteredAmount <= 0) {
24 return;
25 }
26
27 widget.addNewTransaction(
28 enteredTitle,
29 enteredAmount,
30 );
31
32 Navigator.of(context).pop();
33 }
34
35 @override
36 Widget build(BuildContext context) {
37 return Card(
38 child: Container(
39 padding: EdgeInsets.all(10),
40 child: Column(
41 crossAxisAlignment: CrossAxisAlignment.end,
42 children: <Widget>[
43 TextField(
44 decoration: InputDecoration(
45 labelText: 'Titre',
46 ),
47 controller: titleController,
48 onSubmitted: (_) => submitData(),
49 ),
50 TextField(
51 decoration: InputDecoration(
52 labelText: 'Montant',
53 ),
54 controller: amountController,
55 keyboardType: TextInputType.number,
56 onSubmitted: (_) => submitData(),
57 ),
58 FlatButton(
59 child: Text(
60 'Ajouter la Transaction',
61 ),
62 textColor: Colors.purple,
63 onPressed: submitData,
64 ),
65 ],
66 ),
67 ),
68 );
69 }
70}
Le Fichier transaction_list.dart P10
1/// ./widgets/transaction_list.dart
2
3import 'package:flutter/material.dart';
4import 'package:intl/intl.dart';
5
6import '../models/transaction.dart';
7
8class TransactionList extends StatelessWidget {
9 final List<Transaction> transactions;
10 TransactionList(this.transactions);
11
12 @override
13 Widget build(BuildContext context) {
14 return Container(
15 height: 300,
16 child: ListView.builder(
17 itemBuilder: (context, index) {
18 return Card(
19 child: Row(
20 children: <Widget>[
21 Container(
22 margin: EdgeInsets.symmetric(
23 vertical: 10,
24 horizontal: 15,
25 ),
26 decoration: BoxDecoration(
27 border: Border.all(
28 color: Colors.purple,
29 width: 2,
30 ),
31 ),
32 padding: EdgeInsets.all(10),
33 child: Text(
34 '\$: ${transactions[index].amount.toStringAsFixed(2)}',
35 style: TextStyle(
36 fontWeight: FontWeight.bold,
37 fontSize: 20,
38 color: Colors.purple,
39 ),
40 ),
41 ),
42 Column(
43 crossAxisAlignment: CrossAxisAlignment.start,
44 children: <Widget>[
45 Text(
46 transactions[index].title,
47 style: Theme.of(context).textTheme.title,
48 ),
49 Text(
50 DateFormat('dd MMM yyyy')
51 .format(transactions[index].date),
52 style: TextStyle(
53 color: Colors.grey,
54 ),
55 ),
56 ],
57 ),
58 ],
59 ),
60 );
61 },
62 itemCount: transactions.length,
63 ),
64 );
65 }
66}
Le fichier transaction.dart (model de transaction) P10
1/// ./models/transaction.dart
2
3import 'package:flutter/foundation.dart';
4
5class Transaction {
6 final String id;
7 final String title;
8 final double amount;
9 final DateTime date;
10
11 Transaction({
12 @required this.id,
13 @required this.title,
14 @required this.amount,
15 @required this.date,
16 });
17}
- Ajout des graphs après ça (Prochain Post sur Flutter probablement)
No comments here yet.