01.07.2022 - ЖЗГ

Flutter: использование пакетов

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

Не все йогурты одинаково полезны (с)

Иногда стандартных библиотек поставляемых с Fllutter не хватает, а самому что-то писать затруднительно — выходом может служить использование уже написанного и опакеченого кода. Все пакеты Flutter находятся на pub.dev, для добавления любого из пакетов с этого сайта в проект, достаточно добавить в pubspec.ymal проекта зависимость. Например:

dependencies:
  fluttertoast: ^8.0.9

dependencies:

fluttertoast: ^8.0.9

После чего Android Studio предложит обновить зависимости. Далее добавим в main.dart импортируемую библиотеку:

import 'package:fluttertoast/fluttertoast.dart';

1	import 'package:fluttertoast/fluttertoast.dart';

Далее непосредственное использование:

 ListTile(
                onTap: (){
                  Fluttertoast.showToast(
                      msg: "Здраствуйте я ваша дядя..",
                      toastLength: Toast.LENGTH_SHORT,
                      gravity: ToastGravity.CENTER,
                      timeInSecForIosWeb: 1,
                      backgroundColor: Colors.red,
                      textColor: Colors.white,
                      fontSize: 16.0
                  );
                },

ListTile(

onTap: (){

Fluttertoast.showToast(

msg: "Здраствуйте я ваша дядя..",

toastLength: Toast.LENGTH_SHORT,

gravity: ToastGravity.CENTER,

timeInSecForIosWeb: 1,

backgroundColor: Colors.red,

textColor: Colors.white,

fontSize: 16.0

);

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

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, диалоговые окна

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