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)