ЖЗГ - Страница 59 из 297 - Жизнь замечательных грибов

Новый проект. DHCP сервер с выборкой из БД на Python

Задачей было написать аналог проекта DHCP2DB , но только на Python вместо C. В принципе […]

Читать далее »
Arduino Uno краткий обзор..

Ну на самом деле таких обзоров в «интернетиках» пруд пруди.. Ну чтож, внесу и я […]

Читать далее »
Получение данных из Active Directory посредством PHP

Сам за себя лучше всего расскажет мой кусок кода. Все сдобрено максимально большим количеством комментариев. […]

Читать далее »

Flutter: переход между экранами

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

Продолжаем работать с приложением из предыдущей статьи.

А что если логика работы приложения не ограничивается одним экраном? Создадим файл /lib/pages/about.dart

import 'package:flutter/material.dart';

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

import 'package:flutter/material.dart';

class AboutMe extends StatefulWidget {

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

}

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

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('О нас'))

);

}

А в файл page1.dart добавим связку со страницей:

import 'package:invent/pages/about.dart';

И в меню строчку вызова новой страницы:

import 'package:invent/pages/about.dart';

И в меню строчку вызова новой страницы:

ListTile(
                onTap: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context) => AboutMe()));
                },
                leading: Icon(Icons.account_balance_outlined,), title: Text('About'),
                tileColor: Color(0xFFF5F5F5),
                dense: false,
              ),

ListTile(

onTap: (){

Navigator.push(context, MaterialPageRoute(builder: (context) => AboutMe()));

leading: Icon(Icons.account_balance_outlined,), title: Text('About'),

tileColor: Color(0xFFF5F5F5),

dense: false,

В результате получим переход на другую страницу:

Можно заметить, что срелка «назад» добавилась автоматичеки. Программно это вызов:

Navigator.pop(context);

1	Navigator.pop(context);

Navigator – виджет-класс, позволяющий управлять стеком дочерних виджетов, т.е. открывать, закрывать и переключать окна или страницы. Когда мы используем MaterialApp, то экземпляр класса Navigator уже создан

Второй способ переключения между экранами

Существует второй штатный способ переключения между экранами. Особой разницы между ними нет, каждый использует по своему усмотрению. Flutter позволяет переключаться между экранами при помощи «маршрутов». Для этого в главном файле вместо вызова home: Page1() добавим маршруты:

import 'package:invent/pages/about.dart';
import 'pages/page1.dart';
...
 Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Инвентаризация ССК',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
        initialRoute: '/',
        routes: {
          '/':(BuildContext context) => Page1(),
          '/AboutMe':(BuildContext context) => AboutMe()
        }
    );
  }

import 'package:invent/pages/about.dart';

import 'pages/page1.dart';

...

Widget build(BuildContext context) {

return MaterialApp(

title: 'Инвентаризация ССК',

debugShowCheckedModeBanner: false,

theme: ThemeData(

primarySwatch: Colors.blue,

initialRoute: '/',

routes: {

'/':(BuildContext context) => Page1(),

'/AboutMe':(BuildContext context) => AboutMe()

}

);

}

И соответственно тогда вызов перехода будет теперь осуществлять вот так:

 ListTile(
                onTap: (){
                  Navigator.pushNamed(context, "/AboutMe");
                },
                leading: Icon(Icons.account_balance_outlined,), title: Text('About'),
                tileColor: Color(0xFFF5F5F5),
                dense: false,
              ),

ListTile(

onTap: (){

Navigator.pushNamed(context, "/AboutMe");

leading: Icon(Icons.account_balance_outlined,), title: Text('About'),

tileColor: Color(0xFFF5F5F5),

dense: false,

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

Flutter: диалоговое окно

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

В предыдущей статье, мы нарисовали меню. Теперь нужно начинать реализовывать какую-то реакцию на действия в этом меню. Например показать диалоговое окно закрытия приложения. Это правило хорошего тона у приложений — спросить прежде чем окончательно выйти.

Во Flutter за показ диалогов отвечают две фунции, которые работают непосредственно друг с другом в связке:

AlertDialog — подготовка данных для отображения

showDialog — непосредственные вывод диалога пользователю

Оформим диалог в виде отдельно функции:

SureExitDialog(BuildContext context) {
    Widget cancelButton = TextButton(
      child: Text("Остаться"),
      onPressed:  () {Navigator.pop(context);},
    );
    Widget yesButton = TextButton(
      child: Text("Да"),
      onPressed:  () {
                if (Platform.isAndroid) {
                  SystemChannels.platform.invokeMethod(
                      'SystemNavigator.pop');
                } else {
                  exit(0);
                };
},
    );
    AlertDialog alert = AlertDialog(
      title: Text("Подтверждение"),
      content: Text("Вы действительно хотите выйти из приложения?"),
      actions: [
        cancelButton,
        yesButton,
      ],
    );
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }

SureExitDialog(BuildContext context) {

Widget cancelButton = TextButton(

child: Text("Остаться"),

onPressed: () {Navigator.pop(context);},

);

Widget yesButton = TextButton(

child: Text("Да"),

onPressed: () {

if (Platform.isAndroid) {

SystemChannels.platform.invokeMethod(

'SystemNavigator.pop');

} else {

exit(0);

};

);

AlertDialog alert = AlertDialog(

title: Text("Подтверждение"),

content: Text("Вы действительно хотите выйти из приложения?"),

actions: [

cancelButton,

yesButton,

);

showDialog(

context: context,

builder: (BuildContext context) {

return alert;

);

}

Добавим вызов диалога из нажатия кнопки выхода:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        backgroundColor: Colors.green,
        automaticallyImplyLeading: true,
        title: Text(
          'Инвентаризация'
        ),
        actions: [
          new IconButton(
              onPressed: () {
                SureExitDialog(context);
              },
              icon: new Icon(Icons.exit_to_app)
          ),
        ],
        centerTitle: true,
        elevation: 4,
      ),
...

@override

Widget build(BuildContext context) {

return Scaffold(

key: scaffoldKey,

appBar: AppBar(

backgroundColor: Colors.green,

automaticallyImplyLeading: true,

title: Text(

'Инвентаризация'

actions: [

new IconButton(

onPressed: () {

SureExitDialog(context);

icon: new Icon(Icons.exit_to_app)

centerTitle: true,

elevation: 4,

...

Результат:

Для любителей диалоговых окон во весь экран (что актуально для мобильных, вот еще вариант:

showDialog(
      context: context,
      builder: (BuildContext context) {
        return Align (
          alignment: Alignment.bottomCenter,
            child:
            Container(
              width: double.infinity,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(32.0),
                        topRight: Radius.circular(32.0))),
              child:Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Material(
                          child: Text("Подтверждение",
                              style: TextStyle(
                                  fontSize: 14.0, color: Colors.black))),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Material(
                          child: Text("Вы действительно хотите выйти из приложения?",
                              style: TextStyle(
                                  fontSize: 14.0, color: Colors.black))),
                    ),
                    cancelButton,
                    yesButton
                  ]
              )
            )
        );
      },
    );
  }

showDialog(

context: context,

builder: (BuildContext context) {

return Align (

alignment: Alignment.bottomCenter,

child:

Container(

width: double.infinity,

decoration: BoxDecoration(

color: Colors.white,

borderRadius: BorderRadius.only(

topLeft: Radius.circular(32.0),

topRight: Radius.circular(32.0))),

child:Column(

mainAxisSize: MainAxisSize.min,

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Padding(

padding: const EdgeInsets.all(16.0),

child: Material(

child: Text("Подтверждение",

style: TextStyle(

fontSize: 14.0, color: Colors.black))),

Padding(

padding: const EdgeInsets.all(16.0),

child: Material(

child: Text("Вы действительно хотите выйти из приложения?",

style: TextStyle(

fontSize: 14.0, color: Colors.black))),

cancelButton,

yesButton

]

)

);

}

Результат:

Оставить комментарий dart, flutter, диалоговые окна

Flutter: реализуем выплывающее меню слева

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

Меню слева в Flutter реализуется при помощи виджета drawer. Заголовок меню отображается при помощи виджета DrawerHeader, а пункты меню при помощи ListTiles.

В результате добавления к предыдущему примеру (удалите leading: new Icon(Icons.menu), ) кода:

 drawer: new Drawer(
          child: new ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              new DrawerHeader(
                  child: new Text("Инвентаризация ТМЦ",textAlign: TextAlign.center,style: Theme.of(context).textTheme.headline4),
                  decoration: new BoxDecoration(color: Colors.blue),
              ),
              ListTile(
                title: const Text('Загрузить список',style: TextStyle(color: Colors.green,fontSize: 26, backgroundColor: Colors.amberAccent),),
                onTap: () {},
              ),
              ListTile(title: const Text('Выгрузить результаты',style: TextStyle(fontSize: 26),),onTap: () {}),
              ListTile(title: const Text('Сканировать',style: TextStyle(fontSize: 26),),onTap: () {}),
            ],
          ),

drawer: new Drawer(

child: new ListView(

padding: EdgeInsets.zero,

children: <Widget>[

new DrawerHeader(

child: new Text("Инвентаризация ТМЦ",textAlign: TextAlign.center,style: Theme.of(context).textTheme.headline4),

decoration: new BoxDecoration(color: Colors.blue),

ListTile(

title: const Text('Загрузить список',style: TextStyle(color: Colors.green,fontSize: 26, backgroundColor: Colors.amberAccent),),

onTap: () {},

ListTile(title: const Text('Выгрузить результаты',style: TextStyle(fontSize: 26),),onTap: () {}),

ListTile(title: const Text('Сканировать',style: TextStyle(fontSize: 26),),onTap: () {}),

Получим нечто вроде:

Обработка выбора пункта меню происходит в onTap(){} Например закрыть список можно:

 Navigator.pop(context);

1	Navigator.pop(context);

Пример как сделать в шапке меню две и более мтрочки:

              new DrawerHeader(
                  child: Column(
                    children: <Widget>[
                        new Text("Инвентаризация ТМЦ",textAlign: TextAlign.center,style: Theme.of(context).textTheme.headline4),
                        new Text("Меня зовут Вася",textAlign: TextAlign.center,style: Theme.of(context).textTheme.headline5),
                      ],
                  ),
              ),

new DrawerHeader(

child: Column(

children: <Widget>[

new Text("Инвентаризация ТМЦ",textAlign: TextAlign.center,style: Theme.of(context).textTheme.headline4),

new Text("Меня зовут Вася",textAlign: TextAlign.center,style: Theme.of(context).textTheme.headline5),

Разделение пунктов меню:

              ListTile(title: const Text('Выгрузить результаты',style: TextStyle(fontSize: 26),),onTap: () {}),
              Divider(color: Colors.black87),
              ListTile(title: const Text('Сканировать',style: TextStyle(fontSize: 26),),onTap: () {}),

ListTile(title: const Text('Выгрузить результаты',style: TextStyle(fontSize: 26),),onTap: () {}),

Divider(color: Colors.black87),

ListTile(title: const Text('Сканировать',style: TextStyle(fontSize: 26),),onTap: () {}),

Добавить фото в заголовок меню:

 new DrawerHeader(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.scaleDown,
                    image: AssetImage("./lib/images/lenin.jpg"),
                  ),
                ),
                  child: Column(
                    children: <Widget>[
                        new Text("Инвентаризация ТМЦ",textAlign: TextAlign.center,style: Theme.of(context).textTheme.headline4),
                        new Text("Меня зовут Вася",textAlign: TextAlign.center,style: Theme.of(context).textTheme.headline5),
                      ],
                  ),
              ),

new DrawerHeader(

decoration: BoxDecoration(

image: DecorationImage(

fit: BoxFit.scaleDown,

image: AssetImage("./lib/images/lenin.jpg"),

child: Column(

children: <Widget>[

new Text("Инвентаризация ТМЦ",textAlign: TextAlign.center,style: Theme.of(context).textTheme.headline4),

new Text("Меня зовут Вася",textAlign: TextAlign.center,style: Theme.of(context).textTheme.headline5),

Может выйти ошибка:

The following assertion was thrown resolving an image codec:
Unable to load asset: ./lib/resources/logo_1200_630.jpg

Для того чтобы исправить, нужно в pubspec.yaml добавить:

В результате получится что-то вроде:

P.S. Открыл для себя https://app.flutterflow.io где UI можно рисовать «визульно», и на выходе получать код.Это таки несколько удобнее и быстрее. Далее буду пытаться использовать этот сервис

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

Flutter: учимся создавать AppBar

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

Любое приложение чаще всего запускается с главного экрана, на котором расположено некое меню. С него и начнем. Возьмём приложение из предыдущей статьи, и продолжим «стругать»:

import 'package:flutter/material.dart';
class Page1 extends StatefulWidget {
  _Page1State createState() => _Page1State(); // сюда передаем текущее состояние страницы
}
class _Page1State extends State<Page1> { // _ впереди класса, означает чтоб скрыть доступ из другх файлов
  @override
  Widget build(BuildContext context) {
    return Scaffold( // чаще всего используемый "корневой" виджет, который позволяет добавлять в себя другие: AppBar, BottomNavigationBar,Drawer, FloatingActionButton и т.п.
        appBar: AppBar(
            title: Text("Инвентаризация"),
            leading: new Icon(Icons.menu),
            actions: <Widget>[
              new IconButton(
                  onPressed: (){},
                  icon: new Icon(Icons.exit_to_app)
              )
            ]
        ),
        body: Center(
            child: Text(
              "Ууу как всё запущено пациент..",
              textAlign: TextAlign.center,
              style: Theme.of(context).textTheme.headline3,
            )
        )
    );
  }

}

import 'package:flutter/material.dart';

class Page1 extends StatefulWidget {

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

}

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

@override

Widget build(BuildContext context) {

return Scaffold( // чаще всего используемый "корневой" виджет, который позволяет добавлять в себя другие: AppBar, BottomNavigationBar,Drawer, FloatingActionButton и т.п.

appBar: AppBar(

title: Text("Инвентаризация"),

leading: new Icon(Icons.menu),

actions: <Widget>[

new IconButton(

onPressed: (){},

icon: new Icon(Icons.exit_to_app)

)

]

body: Center(

child: Text(

"Ууу как всё запущено пациент..",

textAlign: TextAlign.center,

style: Theme.of(context).textTheme.headline3,

)

);

}

Здесь мы добавили иконку развертываемого меню в левом углу и виджет-кнопку «Выхода» из приложения.

Чтобы реализовать выход из приложения, нужно добавить импорт библиотеки и в OnPressed собственно команду выхода:

...
import 'package:flutter/services.dart';
...
                  onPressed: () {
                                        if (Platform.isAndroid) {
                      SystemChannels.platform.invokeMethod(
                          'SystemNavigator.pop');
                    } else {
                      exit(0);
                    };
                  },

...

import 'package:flutter/services.dart';

...

onPressed: () {

if (Platform.isAndroid) {

SystemChannels.platform.invokeMethod(

'SystemNavigator.pop');

} else {

exit(0);

};

Как видите, тут мы уже подобрались к толике кросплатформенности. Что работает на одной платформе, может не работать на другой. И функционал «выхода» в одной из этих специфик.

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

Flutter: основные принципы построения приложения

30.06.2022 Павел Грибов Из жизни

Минимальное приложение Flutter, это:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
debugShowCheckedModeBanner: false, //убираем надпись debug
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),

    );
  }
}

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

debugShowCheckedModeBanner: false, //убираем надпись debug

theme: ThemeData(

primarySwatch: Colors.blue,

);

}

,далее обычно начинают плясать именно от этого шаблона. Запускаем, смотрим…и ничего кроме квадратика с названием окна не видим. Ну собственно ничего более и нет.

Одной из «киллер фич» Flutter считается, что всё что визуально расположено на экране — это виджеты вложенные друг в друга. С «детьми» и «родителями». Принцип разметки примерно такой же как в HTML + CSS: кидаем в «стартовый» виджет другие виджеты различного вида , и добавляем к ним «украшения». В данном случае внутри стартового виджета ничего нет.

Второй «киллер фичей» флаттера является так называемый HotReload — при изменении кода программы, и последующем его изменении, запущеная ранее программа не закрывается, а «обновляется» на лету. Если конечно код не изменен «кардинально»

Добавляем файл-основной экран page1.dart:

import 'package:flutter/material.dart';
class Page1 extends StatefulWidget {
  _Page1State createState() => _Page1State(); // сюда передаем текущее состояние страницы
}
class _Page1State extends State<Page1> { // _ впереди класса, означает чтоб скрыть доступ из другх файлов
  @override
  Widget build(BuildContext context) {
    return Scaffold( // чаще всего используемый "корневой" виджет, который позволяет добавлять в себя другие: AppBar, BottomNavigationBar,Drawer, FloatingActionButton и т.п.
        appBar: AppBar(title: Text("Home page")),
        body: Center(
            child: Text(
              "Ууу как всё запущено пациент..",
              textAlign: TextAlign.center,
              style: Theme.of(context).textTheme.headline3,
            )
        )
    );
  }

}

import 'package:flutter/material.dart';

class Page1 extends StatefulWidget {

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

}

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

@override

Widget build(BuildContext context) {

appBar: AppBar(title: Text("Home page")),

body: Center(

child: Text(

"Ууу как всё запущено пациент..",

textAlign: TextAlign.center,

style: Theme.of(context).textTheme.headline3,

)

);

}

И далее добавляем в main,dart строчки:

В результате запуска получаем что-то типа:

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

« 1 … 57 58 59 60 61 … 297 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
					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