06.07.2022 - ЖЗГ

Flutter: виджет Card

06.07.2022 Павел Грибов Flutter

Данный виджет предназначен для того чтобы отобразить что-то в отдельной области «с тенью».

Например:

import 'package:flutter/material.dart';
import 'package:invent/globals.dart' as globals;

class TMCView extends StatefulWidget {
  _TMCViewState createState() => _TMCViewState(); // сюда передаем текущее состояние страницы
}
class _TMCViewState extends State<TMCView> {// _ впереди класса, означает чтоб скрыть доступ из другх файлов
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Найденое ТМЦ')),
      body: Center(
          child: Card (
            margin: EdgeInsets.all(10),
            color: Colors.green[100],
            shadowColor: Colors.blueGrey,
            elevation: 20,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Image.network(
                    'https://picsum.photos/seed/49/600',
                    width: 100,
                    height: 100,
                    fit: BoxFit.cover,
                  ),
                  title: Text(
                    "Принтер",
                    style: TextStyle(fontSize: 20),
                  ),
                  subtitle: Text('Хороший принтер, нужно брать..'),
                ),
                ButtonBar(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      ElevatedButton(
                        child: new Text('Добавить в найденые'),
                        onPressed: (){
                          Navigator.pushNamed(context, "/");
                        },
                      ),
                    ]

                ),
              ],
            ),
          )
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:invent/globals.dart' as globals;

class TMCView extends StatefulWidget {

_TMCViewState createState() => _TMCViewState(); // сюда передаем текущее состояние страницы

}

class _TMCViewState extends State<TMCView> {// _ впереди класса, означает чтоб скрыть доступ из другх файлов

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Найденое ТМЦ')),

body: Center(

child: Card (

margin: EdgeInsets.all(10),

color: Colors.green[100],

shadowColor: Colors.blueGrey,

elevation: 20,

child: Column(

mainAxisSize: MainAxisSize.min,

children: <Widget>[

ListTile(

leading: Image.network(

'https://picsum.photos/seed/49/600',

width: 100,

height: 100,

fit: BoxFit.cover,

title: Text(

"Принтер",

style: TextStyle(fontSize: 20),

subtitle: Text('Хороший принтер, нужно брать..'),

ButtonBar(

mainAxisSize: MainAxisSize.min,

children: <Widget>[

ElevatedButton(

child: new Text('Добавить в найденые'),

onPressed: (){

Navigator.pushNamed(context, "/");

]

)

);

}

Получим:

Оставить комментарий card, dart, flutter

Flutter: виджет динамического списка

06.07.2022 Павел Грибов Flutter

Теперь, когда мы умеем читать данные из сети, сохранять их локально, осталось научится отображать их в виде ~~красивого~~ списка на отдельном экране. Создадим отдельный файл tmclist.dart:

import 'package:flutter/material.dart';
import 'package:invent/globals.dart' as globals;

class TMCList extends StatefulWidget {
  _TMCListState createState() => _TMCListState(); // сюда передаем текущее состояние страницы
}
class _TMCListState extends State<TMCList> {// _ впереди класса, означает чтоб скрыть доступ из другх файлов
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Список ТМЦ')),
      body: Center()
}
      )
    );
  }
}

import 'package:flutter/material.dart';

import 'package:invent/globals.dart' as globals;

class TMCList extends StatefulWidget {

_TMCListState createState() => _TMCListState(); // сюда передаем текущее состояние страницы

}

class _TMCListState extends State<TMCList> {// _ впереди класса, означает чтоб скрыть доступ из другх файлов

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Список ТМЦ')),

body: Center()

}

)

);

}

И далее в body вставляем виджет ListView.builder который может строить список на основе списка данных. В простейшем случае это было бы:

body: ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: users.length,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                padding: EdgeInsets.symmetric(vertical: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(globals.tmclist[index]["name"],, style: TextStyle(fontSize: 22)),
                  ],
                )
              );
            }
        ),

body: ListView.builder(

padding: const EdgeInsets.all(8),

itemCount: users.length,

itemBuilder: (BuildContext context, int index) {

return Container(

padding: EdgeInsets.symmetric(vertical: 10),

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Text(globals.tmclist[index]["name"],, style: TextStyle(fontSize: 22)),

)

);

}

Но так не интересно, просто список без «украшений», потому я чкть усложнил, но суть остается едина:

 body: ListView.builder(
        padding: const EdgeInsets.all(8),
        itemCount: globals.tmclist.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.symmetric(vertical: 10),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Align(
                  alignment: AlignmentDirectional(0, 0),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Align(
                        alignment: AlignmentDirectional(0.05, 0),
                        child: Text(
                          globals.tmclist[index]["id"],
                          textAlign: TextAlign.start,
                        ),
                      ),
                      Text(
                        globals.tmclist[index]["name"],
                        textAlign: TextAlign.start,
                        style: TextStyle(fontSize: 22)
                      ),
                      Image.network(
                        'https://picsum.photos/seed/49/600',
                        width: 100,
                        height: 100,
                        fit: BoxFit.cover,
                      ),
                      new Divider()
                    ],
                  ),
                ),
                Text(
                    globals.tmclist[index]["comment"],
                    style: TextStyle(fontSize: 18)
                ),
              ],
            ),
          );
        }
      )

body: ListView.builder(

padding: const EdgeInsets.all(8),

itemCount: globals.tmclist.length,

itemBuilder: (BuildContext context, int index) {

return Container(

padding: EdgeInsets.symmetric(vertical: 10),

child: Column(

mainAxisSize: MainAxisSize.max,

mainAxisAlignment: MainAxisAlignment.spaceAround,

children: [

Align(

alignment: AlignmentDirectional(0, 0),

child: Row(

mainAxisSize: MainAxisSize.max,

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: [

Align(

alignment: AlignmentDirectional(0.05, 0),

child: Text(

globals.tmclist[index]["id"],

textAlign: TextAlign.start,

Text(

globals.tmclist[index]["name"],

textAlign: TextAlign.start,

style: TextStyle(fontSize: 22)

Image.network(

'https://picsum.photos/seed/49/600',

width: 100,

height: 100,

fit: BoxFit.cover,

new Divider()

Text(

globals.tmclist[index]["comment"],

style: TextStyle(fontSize: 18)

);

}

)

Результат:

Остался вопрос, как навесить действие на выбор какого то пункта, и распознать какой собственно пункт выбрали? А вот для этого служит специальный виджет GestureDetector, который собственно это всё и позволяет делать:

  appBar: AppBar(title: Text('Список документов инвентаризации')),
        body: ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: globals.MyInvents.length,
            itemBuilder: (BuildContext context, int index) {
              return
                GestureDetector(
                      onTap: (){
                        print(index);
                      },
                      child: Container(
                      padding: EdgeInsets.symmetric(vertical: 10),
                      child: Column(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
...

appBar: AppBar(title: Text('Список документов инвентаризации')),

body: ListView.builder(

padding: const EdgeInsets.all(8),

itemCount: globals.MyInvents.length,

itemBuilder: (BuildContext context, int index) {

return

GestureDetector(

onTap: (){

print(index);

child: Container(

padding: EdgeInsets.symmetric(vertical: 10),

child: Column(

mainAxisSize: MainAxisSize.max,

mainAxisAlignment: MainAxisAlignment.spaceAround,

children: [

...

Получим при клике по пунктам меню:

Оставить комментарий dart, flutter, виджет списка, динамический

Flutter: Хранение данных приложения

06.07.2022 Павел Грибов Flutter, Из жизни

На этом месте должна была быть статья по работу Flutter с SQLite, но не сложилось. Не умеет Flutter без плясок с бубном работать с SQLite одновременно на всех целевых платформах сразу: WIndows/Android/IOS. Самый популярный пакет sqflite — работает только на Android/IOS, остальные, задекларированные как рабочие под Windows, по оной так запустить мне и не удалось, с учётом что у меня ограниченные права Windows. Потому, стал смотреть в сторону пакета Hive — работающего на всех целевых платформах, т.к. написан изначально на языке Dart.

Hive -это быстрая локальная база для Flutter, Dart работающая на основе ключ-значение.

Установка: добавить в зависимости pubsec.yaml:

dependencies:
  hive: ^2.2.3

1 2	dependencies: hive: ^2.2.3

Для удобства можно написать маленький класс для работы с ключами-значениями:

import 'dart:io';
import 'package:hive/hive.dart';

class THave {
  String bname="";
  void Init(String basename)  {
    var path = Directory.current.path;
    Hive.init(path);
    bname=basename;
  }
  void Add(String key,var value) async {
    var box = await Hive.openBox(bname);
    await box.put(key, value);
  }
  void Delete(String key) async {
    var box = await Hive.openBox(bname);
    await box.delete(key);
  }
  dynamic  Get(String key) async  {
    var box =  await Hive.openBox(bname);
    return (box.get(key));
  }
  Future <Iterable> GetKeys() async {
    var box = await Hive.openBox(bname);
    return await box.keys;
  }
}

import 'dart:io';

import 'package:hive/hive.dart';

class THave {

String bname="";

void Init(String basename) {

var path = Directory.current.path;

Hive.init(path);

bname=basename;

}

void Add(String key,var value) async {

var box = await Hive.openBox(bname);

await box.put(key, value);

}

void Delete(String key) async {

var box = await Hive.openBox(bname);

await box.delete(key);

}

dynamic Get(String key) async {

var box = await Hive.openBox(bname);

return (box.get(key));

}

Future <Iterable> GetKeys() async {

var box = await Hive.openBox(bname);

return await box.keys;

}

И теперь например можно при новом запуске приложения «вспоминать» авторизацию:

main.dart:

void main() {
  THave have=THave();
  have.Init("auth");
  have.Get("UserId").then((UserId){
    if (UserId!=null){
      globals.UserId=UserId;
    };
    have.Get("UserName").then((UserName){
      if (UserId!=null){
        globals.UserName=UserName;
        globals.is_login=true;
      };
      runApp(const MyApp());
    });
  });
}

void main() {

THave have=THave();

have.Init("auth");

have.Get("UserId").then((UserId){

if (UserId!=null){

globals.UserId=UserId;

};

have.Get("UserName").then((UserName){

if (UserId!=null){

globals.UserName=UserName;

globals.is_login=true;

};

runApp(const MyApp());

});

}

                      onPressed: (){
                        http.post(Uri.parse('https://erfwe.ru/1.php'),body: {'login':_controller1.text,'password':_controller2.text}).then((response) {
                          print("Response status: ${response.statusCode}");
                          print("Response body: ${response.body}");
                          Map<String, dynamic> user = jsonDecode(response.body);
                          setState(() {
                            globals.UserName = user["UserName"];
                            globals.is_login = true;
                            globals.UserId = user["UserId"];
                            THave have=THave();
                            have.Init("auth");
                            have.Add("UserName", globals.UserName);
                            have.Add("UserId", globals.UserId);
                          });
                        }).catchError((error){
                          print("Error: $error");
                        });
                      },

onPressed: (){

http.post(Uri.parse('https://erfwe.ru/1.php'),body: {'login':_controller1.text,'password':_controller2.text}).then((response) {

print("Response status: ${response.statusCode}");

print("Response body: ${response.body}");

Map<String, dynamic> user = jsonDecode(response.body);

setState(() {

globals.UserName = user["UserName"];

globals.is_login = true;

globals.UserId = user["UserId"];

THave have=THave();

have.Init("auth");

have.Add("UserName", globals.UserName);

have.Add("UserId", globals.UserId);

});

}).catchError((error){

print("Error: $error");

});

Причем нужно отметить свойства сохранения и извлечения ключ-значение: при сохранении мы не ждем результата записи. При чтении — соответственно необходимо дождаться.

Оставить комментарий dart, flutter, hive

Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31