Develop Reference

Flutter - How do I get the app to run right after the phone lock screen?

I'm building a motivational app.
I want the app to run as soon as people turn on their phones and unlock the lock screen.
I tried using auto_start_flutter that I learned through Googleing.
import 'dart:async';
import 'dart:convert';
// import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:share_plus/share_plus.dart';
import 'package:app/count_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:auto_start_flutter/auto_start_flutter.dart';
import './main.dart';
class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final String androidTestId = 'ca-app-pub-3940256099942544/6300978111';
late CountPage _countPage;
// BannerAd? banner;
#override
void initState() {
super.initState();
initAutoStart();
// banner = BannerAd(
// listener: AdManagerBannerAdListener(),
// size: AdSize.banner,
// adUnitId: androidTestId,
// request: AdRequest(),//..load();
}
Future<void> initAutoStart() async {
try {
//check auto-start availability.
var test = await (isAutoStartAvailable as FutureOr<bool>);
print(test);
//if available then navigate to auto-start setting page.
if (test) await getAutoStartPermission();
} on PlatformException catch (e) {
print(e);
}
if (!mounted) return;
}
#override
Widget build(BuildContext context) {
_countPage = Provider.of<CountPage>(context, listen: true);
List list = jsonDecode(_countPage.arrayText);
bool toggle = false;
return Scaffold(
appBar: AppBar(
backgroundColor: _countPage.selection,
title: Text('철학 한 스푼'),
centerTitle: true, // 중앙 정렬
elevation: 0.0,
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
// currentAccountPicture: CircleAvatar(
// backgroundImage: AssetImage('캡처.png'), // 앱 아이콘 들어갈자리
// backgroundColor: Colors.white,
// ),
accountName: Text('철학 한 스푼'),
accountEmail: Text("개발자 이메일: kaingsik13#naver.com"),
decoration: BoxDecoration(
color: _countPage.selection,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40.0),
bottomRight: Radius.circular(40.0),
)),
),
ListTile(
leading: Icon(
Icons.home,
color: Colors.grey[850],
),
title: Text('메인 화면'),
onTap: () {
print('메인 화면 확인');
},
),
ListTile(
leading: Icon(
Icons.settings,
color: Colors.grey[850],
),
title: Text('설정'),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return Option_page();
}));
},
),
ListTile(
leading: Icon(
Icons.question_answer,
color: Colors.grey[850],
),
title: Text('리뷰 쓰기'),
onTap: () {
print('리뷰 화면 확인');
},
),
ListTile(
leading: Icon(
Icons.question_answer,
color: Colors.grey[850],
),
title: Text('후원 하기(광고 제거)'),
onTap: () {
print('후원 화면 확인');
},
),
],
),
),
body: Container(
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: IconButton(
onPressed: () {
_countPage.page_down();
},
icon: Icon(Icons.chevron_left),
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
alignment: Alignment(0.0, 0.0),
color: Colors.white,
child: Text(
list[_countPage.page]["message"],
style: TextStyle(
fontSize: _countPage.font,
fontFamily: 'snow',
),
textAlign: _countPage.align,
),
),
),
Container(
height: 40,
width: 300,
color: Colors.white,
child: Center(
child: Text(
list[_countPage.page]["author"],
style: TextStyle(fontSize: 20, color: Colors.black),
))),
Container(
child: AnimatedOpacity(
opacity: _countPage.visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
child: Container(
height: 50,
width: 70,
color: Colors.black38,
child: Center(
child: Text("복사 확인",
style: TextStyle(
fontSize: 15, color: Colors.white)))),
),
),
],
),
),
Center(
child: IconButton(
onPressed: () {
_countPage.page_up();
},
icon: Icon(Icons.chevron_right)))
],
),
),
bottomNavigationBar: BottomAppBar(
color: _countPage.selection,
child: Container(
height: 150,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Center(
child: IconButton(
onPressed: () {
_countPage.copy_on();
Clipboard.setData(ClipboardData(
text: list[_countPage.page]["message"]));
Future.delayed(Duration(milliseconds: 800), () {
_countPage.copy_on();
});
},
icon: Icon(Icons.content_copy))),
Center(
child: IconButton(
onPressed: () {
Share.share(list[_countPage.page]["message"]);
},
icon: Icon(Icons.share))),
],
),
Container(
height: 100,
color: Colors.green[50],
),
],
),
),
),
);
}
}
I extracted Android appk and tested it with my phone, but the app doesn't run after the lock screen.
I want my app to run as soon as I unlock the lock screen and come out.

How to remove extra space below a TabBarView inside the body SliverToBoxAdapter in NestedScrollView?

The space between tab bar view and bottom navigation bar is the extra space that I want to remove.
in the image, you can see the space that shouldn't be there
class Tab_Bar2 extends StatefulWidget {
const Tab_Bar2({Key? key}) : super(key: key);
#override
_Tab_Bar2State createState() => _Tab_Bar2State();
}
class _Tab_Bar2State extends State<Tab_Bar2> with SingleTickerProviderStateMixin {
final bodyGlobalKey = GlobalKey();
final List<Widget> myTabs = [
Text(..),
Text(..),
Text(..),
Text(..),
Text(..),
Text(..),
];
late TabController _tabController;
late ScrollController _scrollController;
#override
void initState() {
_scrollController = ScrollController();
_tabController = TabController(length: 6, vsync: this);
super.initState();
}
#override
void dispose() {
_tabController.dispose();
_scrollController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Dashboard"),
centerTitle: true,
backgroundColor: const Color(0xffFFC36A),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.notifications),
),
]),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Color(0xffFFC36A),
),
child: Padding(
padding: EdgeInsets.only(top: 20.0, left: 60),
child: Text(
'Drawer',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
),
ListTile(
title: const Text('Log Out'),
onTap: () {
},
),
ListTile(
title: const Text('Item 2'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
body: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (BuildContext context, value) {
return [
SliverToBoxAdapter(child: Column(
children: [img1(), grid(), rsp(), LiveChart()],
),),
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.symmetric(horizontal: 15,vertical: 15),
child: Text('Latest',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
fontFamily: 'railway',
color: Theme_Data.font_color,
),
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 3.5),
padding: EdgeInsets.symmetric(horizontal: 2.5,vertical: 2.5),
height: 35,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade200),
borderRadius: BorderRadius.all(
Radius.circular(25),
),
),
child: TabBar(
controller: _tabController,
labelPadding: EdgeInsets.symmetric(horizontal: 2.0, vertical: 5),
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50), // Creates border
color: Theme_Data.th_light_color),
tabs: myTabs,
),
),
],
),
),
];
},
body: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Theme(
data: Theme.of(context).copyWith(
dividerColor: Colors.white
),
child: TabBarView(
controller: _tabController,
children: <Widget>[
SalesTable(),
QuotationsTable(),
PurchasesTable(),
TransfersTable(),
ConsumersTable(),
SuppliersTable(),
],
),
),
),
),
);
}
}
in above code i think there might be the issues between the usage of SviverToBoxAdapter what widget should i use instead to achieve the required design

Can't solve problem with FloatingActionButton

I want the dialog to open when a button is clicked, but an error occurs due to BLoC. Previously, there was such an error with the class itself, but I successfully solved it, and in this case, the complexity already arises. I've already tried a couple of options but couldn't solve it. I tried to make the event in onPressed as a separate widget, and the same error did not work either.
home_page
class HomePage extends StatelessWidget {
final todoRepository = TodoRepository();
#override
Widget build(BuildContext context) {
// final TodoBloc todoBloc = context.read<TodoBloc>();
return BlocProvider<TodoBloc>(
create: (context) => TodoBloc(todoRepository),
child: Scaffold(
appBar: AppBar(
title: const Text('Flutter Todos'),
),
// floatingActionButton: FloatingActionButton(
// onPressed: () {
// // _addTodo(context);
// final newTodo = Todo(description: 'Todo 1');
// BlocProvider.of<TodoBloc>(context).add(CreateTodos(newTodo));
// },
// child: const Icon(Icons.add),
// ),
body: SingleChildScrollView(
child: Column(
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
// ActionButton(),
TodoList(),
],
),
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add, size: 32, color: Colors.black),
onPressed: () {
// showAddTodoSheet(context);
// showAddTodoSheet(BuildContext context) {
final TodoBloc todoBloc = context.read<TodoBloc>();
final _todoDescriptionFromController = TextEditingController();
showModalBottomSheet(
context: context,
builder: (builder) {
return BlocBuilder<TodoBloc, TodoState>(
builder: (context, state) {
return Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
color: Colors.transparent,
child: Container(
height: 230,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0))),
child: Padding(
padding: const EdgeInsets.only(
left: 15, top: 25.0, right: 15, bottom: 30),
child: ListView(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: TextFormField(
controller:
_todoDescriptionFromController,
textInputAction:
TextInputAction.newline,
maxLines: 4,
style: const TextStyle(
fontSize: 21,
fontWeight: FontWeight.w400),
autofocus: true,
decoration: const InputDecoration(
hintText: 'I have to...',
labelText: 'New Todo',
labelStyle: TextStyle(
color: Colors.indigoAccent,
fontWeight: FontWeight.w500)),
validator: (value) {
if (value!.isEmpty) {
return 'Empty description!';
}
return value.contains('')
? 'Do not use the # char.'
: null;
},
),
),
Padding(
padding: const EdgeInsets.only(
left: 5, top: 15),
child: CircleAvatar(
backgroundColor: Colors.indigoAccent,
radius: 18,
child: IconButton(
icon: const Icon(
Icons.save,
size: 22,
color: Colors.white,
),
onPressed: () {
final newTodo = Todo(
description:
_todoDescriptionFromController
.value.text);
if (newTodo
.description.isNotEmpty) {
todoBloc
.add(CreateTodos(newTodo));
Navigator.pop(context);
}
},
),
),
)
],
),
],
),
),
),
),
);
});
});
},
),
));
}

You have to use MultiBlocProvider before MaterialApp.
just do like that
#override
Widget build(BuildContext context) => MultiBlocProvider(
providers: [
BlocProvider(create: (_) => TodoBloc()),
],
child: MaterialApp()
);

Move location of title lower

Currently I am trying to implement a tab controller instead of the list view that I am using in the CategorySelector() function. However, I would like to maintain the same design. How can I move the default text title to the location where the arrow is pointing. and for it to be responsive based on the tab selected.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffDCE3E5),
appBar: AppBar(
title: Text('DISCOVER', style:
TextStyle(color: kOnyx,
fontFamily: 'Baukasten'),),
backgroundColor: kSnow,
leading: IconButton(
icon: Icon(Icons.menu),
iconSize: 30.0,
color: kOnyx,
onPressed: () {},
),
elevation: 0.0,
actions: <Widget>[
FlatButton.icon(
icon: Icon(
Icons.person,
color: kOnyx,
size: 30.0,
),
label: Text('Log Out'),
onPressed: () {
_auth.signOut();
Navigator.push(context, MaterialPageRoute(builder: (context) => Authentication()));
},
),
],
),
body: Column(
children: <Widget>[
Container(
color: kSnow,
padding: EdgeInsets.only(left: 15.0, top: 15.0),
child: FractionallySizedBox(
widthFactor: 1.0,
child: Text(
'DISCOVER',
style: TextStyle(
color: kOnyx,
fontSize: 30.0,
//fontWeight: FontWeight.w600,
fontFamily: 'Baukasten'),
),
),
),
CategorySelector(),
],
),
);
}
}

use tabbarView
for example :)
class _MainPage extends State<MainPage> with SingleTickerProviderStateMixin {
TabController controller;
#override
void initState() {
super.initState();
controller = TabController(length: 3, vsync: this);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('App bar'),
),
body: TabBarView(
children: <Widget>[FirstPage(), SecondPage() , ThirdPage()],
controller: controller,
),
bottomNavigationBar: TabBar(tabs: <Tab>[
Tab(icon: Icon(Icons.looks_one),) ,
Tab(icon: Icon(Icons.looks_two),) ,
Tab(icon: Icon(Icons.looks_3),) , ] ,
controller: controller,),
);
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
}

Animating a container as soon as it is added to a widget list (as it appears )

how to animate the added containers as soon as they appear ? ( animation of height going from 0 to containerHeight)
here is a code to illustrate my question:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
List<Widget> widgetList = [Container()];
class _HomeState extends State<Home> {
TextEditingController controller = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated container'),
backgroundColor: Colors.blue,
),
body: Container(
alignment: Alignment.topCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Center(
child: Padding(
//shift to left
padding: const EdgeInsets.only(left: 55.0),
child: Row(
children: widgetList.toList(),
),
),
),
],
),
),
FlatButton(
child: Text(
'Add',
style: TextStyle(color: Colors.white),
),
onPressed: () {
setState(() {
add(controller.text);
});
},
color: Colors.blue,
),
FlatButton(
child: Text(
'Clear',
style: TextStyle(color: Colors.white),
),
onPressed: () {
setState(() {
widgetList.clear();
});
},
color: Colors.blue,
),
TextField(
onChanged: (text) {},
textAlign: TextAlign.center,
controller: controller,
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
fontWeight: FontWeight.w300),
decoration: InputDecoration(
hintStyle: TextStyle(
color: Colors.white, fontWeight: FontWeight.w300),
fillColor: Colors.blue,
filled: true,
),
),
]),
),
);
}
}
void add(String containerHeight) {
widgetList.add(Padding(
padding: const EdgeInsets.all(3.0),
child: AnimatedContainer(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(2.0),
),
duration: Duration(milliseconds: 165),
alignment: Alignment.center,
//color: Colors.red,
height: double.parse(containerHeight),
width: 29.0,
child: Text(
containerHeight,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: containerHeight.length == 1
? 19.0
: containerHeight.length == 2
? 19.0
: containerHeight.length == 3
? 16.0
: containerHeight.length == 4 ? 14.0 : 10.0),
),
)));
}
Screenshot of the ui
You just have to put the height of the container in the text field and press 'add', then the containers will appear directly without animation,
so my question is how to animate so that the height goes from 0 to containerHeight ?
i know it works when the widget is already there and we modify it's height, but i couldn't figure out how to do in that scenario ( adding to a list and displaying it directly ).
thank you.

Try the following code. It is working.
import 'package:flutter/material.dart';
import 'dart:async';
void main() {
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
List<Widget> widgetList = [Container()];
StreamController<String> animationStream = StreamController();
class _HomeState extends State<Home> {
TextEditingController controller = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated container'),
backgroundColor: Colors.blue,
),
body: Container(
alignment: Alignment.topCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Center(
child: Padding(
//shift to left
padding: const EdgeInsets.only(left: 55.0),
child: Row(
children: widgetList.toList(),
),
),
),
],
),
),
FlatButton(
child: Text(
'Add',
style: TextStyle(color: Colors.white),
),
onPressed: () {
animationStream = StreamController();
setState(() {
add("0");
animationStream.sink.add(controller.text);
});
},
color: Colors.blue,
),
FlatButton(
child: Text(
'Clear',
style: TextStyle(color: Colors.white),
),
onPressed: () {
setState(() {
widgetList.clear();
});
},
color: Colors.blue,
),
TextField(
onChanged: (text) {},
textAlign: TextAlign.center,
controller: controller,
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
fontWeight: FontWeight.w300),
decoration: InputDecoration(
hintStyle: TextStyle(
color: Colors.white, fontWeight: FontWeight.w300),
fillColor: Colors.blue,
filled: true,
),
),
]),
),
);
}
}
void add(String containerHeight) {
widgetList.add(new MyWidget());
}
class MyWidget extends StatelessWidget {
const MyWidget({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return StreamBuilder(
stream: animationStream.stream,
builder: (context, snapshot) {
String _hight = "0";
if (snapshot.hasData ) {
_hight = snapshot.data;
try { double.parse(_hight);} catch (e) { print('please enter a valid hight');_hight="0"; }
}
return Padding(
padding: const EdgeInsets.all(3.0),
child: AnimatedContainer(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(2.0),
),
duration: Duration(milliseconds: 2165),
alignment: Alignment.center,
//color: Colors.red,
height: double.parse(_hight),
width: 29.0,
child: Text(
_hight,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: _hight.length == 1
? 19.0
: _hight.length == 2
? 19.0
: _hight.length == 3
? 16.0
: _hight.length == 4 ? 14.0 : 10.0),
),
));
},
);
}
}